728x90
300x250
SMALL
:hover란?
:hover는 css 의사 클래스 중 하나이다.
의사 클래스는 요소의 특정 상태에 따라 스타일을 적용하는데, :hover는 그 중에서도 마우스가 요소 위에 올라갔을 때 적용된다.
이 효과를 활용하면 사용자가 마우스를 올렸을 때 버튼 색이 변하거나, 카드에 그림자가 생기거나, 텍스트가 강조되거나 하는 인터랙션을 줄 수 있다.
기본 문법
선택자:hover {
/* 마우스가 올라갔을 때의 스타일 */
}
예시
a:hover {
color: red;
text-decoration: underline;
}
주의할 점
:hover는 마우스가 있는 환경(pc)에서만 작동한다.
스마트폰에서는 hover가 작동하지 않거나, 터치했을 때만 반응한다.
항상 기본 스타일과 hover상태를 명확하게 대비되게 설정해야 효과가 잘 보인다.
예제1 : 버튼 색상 변경
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Hover 버튼 예제</title>
<style>
.btn {
padding: 12px 24px;
border: 2px solid #333;
background-color: #fff;
color: #333;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
.btn:hover {
background-color: #333;
color: #fff;
}
</style>
</head>
<body>
<button class="btn">마우스를 올려보세요</button>
</body>
</html>
예제 2: 카드에 그림자 효과
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Hover 카드 예제</title>
<style>
.card {
width: 300px;
padding: 20px;
border: 1px solid #ccc;
transition: box-shadow 0.3s ease;
margin: 30px auto;
}
.card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="card">
<h2>카드 제목</h2>
<p>마우스를 올리면 그림자가 생겨 강조됩니다.</p>
</div>
</body>
</html>
카드 제목
마우스를 올리면 그림자가 생겨 강조됩니다.
예제 3 : 이미지 어둡게 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Hover 이미지 어둡게</title>
<style>
.image-container {
width: 300px;
overflow: hidden;
}
.thumb {
width: 100%;
display: block;
filter: brightness(1);
transition: filter 0.3s ease;
}
.thumb:hover {
filter: brightness(0.6);
}
</style>
</head>
<body>
<div class="image-container">
<img class="thumb" src="https://via.placeholder.com/300x200" alt="샘플 이미지" />
</div>
</body>
</html>
예제 4: 링크 밑줄 효과
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Hover 링크</title>
<style>
a {
color: #007bff;
text-decoration: none;
transition: text-decoration 0.2s;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<p><a href="#">이 링크에 마우스를 올려보세요</a></p>
</body>
</html>
728x90
반응형
LIST
'Front-end > 애니메이션' 카테고리의 다른 글
| transform으로 요소를 움직이고 회전시키기 (0) | 2025.05.13 |
|---|---|
| transition으로 부드러운 애니메이션 만들기 (0) | 2025.05.12 |
| 숫자 변경 애니메이션 -비 (0) | 2025.05.10 |
| Lottie 사용 팁 & 주의사항 (0) | 2025.05.09 |
| Lottie 애니메이션 제어하기(재생/정지/속도 등) (0) | 2025.05.06 |
댓글