jQuery의 hover() 메서드는 마우스가 요소 위에 올라갔을 때와 벗어났을 때 각각 다른 동작을 수행할 수 있게 해줍니다. 실용적인 예제를 몇 가지 만들어보겠습니다.
1. 네비게이션 메뉴 강조
마우스를 메뉴 항목 위에 올리면 배경색과 텍스트 색상이 변경되는 간단한 네비게이션 메뉴 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Hover</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.nav-item {
padding: 10px 20px;
background-color: #f4f4f4;
color: #333;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="nav-item">Home</div>
<div class="nav-item">About</div>
<div class="nav-item">Services</div>
<div class="nav-item">Contact</div>
<script>
$(".nav-item").hover(
function () {
$(this).css({ backgroundColor: "#333", color: "#fff" });
},
function () {
$(this).css({ backgroundColor: "#f4f4f4", color: "#333" });
}
);
</script>
</body>
</html>
2. 이미지 확대 효과
마우스를 이미지 위에 올리면 확대되고, 벗어나면 원래 크기로 돌아갑니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Zoom</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.image {
width: 200px;
height: 200px;
transition: transform 0.3s;
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/200" alt="Example Image" class="image">
<script>
$(".image").hover(
function () {
$(this).css("transform", "scale(1.2)");
},
function () {
$(this).css("transform", "scale(1)");
}
);
</script>
</body>
</html>
3. 툴팁 표시
마우스를 특정 요소 위에 올리면 툴팁이 나타나는 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tooltip</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.tooltip {
display: none;
position: absolute;
background-color: #333;
color: #fff;
padding: 5px;
border-radius: 3px;
font-size: 12px;
}
.hover-target {
display: inline-block;
padding: 10px;
background-color: #eee;
cursor: pointer;
margin: 50px;
}
</style>
</head>
<body>
<div class="hover-target">Hover over me!</div>
<div class="tooltip">This is a tooltip!</div>
<script>
$(".hover-target").hover(
function (e) {
$(".tooltip")
.css({ top: e.pageY + 10, left: e.pageX + 10 })
.fadeIn();
},
function () {
$(".tooltip").fadeOut();
}
);
</script>
</body>
</html>
4. 카드 플립 효과
마우스를 카드 위에 올리면 카드가 회전하면서 뒷면이 보이는 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Flip</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.card {
width: 200px;
height: 300px;
perspective: 1000px;
margin: 50px;
}
.inner {
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.front {
background-color: #bbb;
}
.back {
background-color: #333;
color: white;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="card">
<div class="inner">
<div class="front">Front</div>
<div class="back">Back</div>
</div>
</div>
<script>
$(".card").hover(
function () {
$(this).find(".inner").css("transform", "rotateY(180deg)");
},
function () {
$(this).find(".inner").css("transform", "rotateY(0deg)");
}
);
</script>
</body>
</html>
위 예제들은 다양한 상황에서 hover() 이벤트를 활용하는 방법을 보여줍니다. 필요에 따라 스타일과 동작을 조정해 보세요.
#jquery #hover() #hover #event #마우스오버 #마우스아웃 #이벤트 #네비게이션매뉴 #이미지확대효과 #툴립표시 #카드폴립효과
반응형
'프로그램' 카테고리의 다른 글
| jQuery의 dblclick() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.21 |
|---|---|
| jQuery의 mouseenter() / mouseleave() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.19 |
| jQuery의 click() 이벤트를 실용적으로 활용하는 기본적인 예제 (0) | 2024.11.18 |
| jQuery를 사용하여 이미지를 반응형으로 만드는 방법 (0) | 2024.11.13 |
| jquery 숫자만 입력 체크, 천 단위 콤마 자동 추가 (0) | 2024.10.30 |
댓글