mouseenter()와 mouseleave()는 요소에 마우스가 들어오거나 나갈 때 각각 이벤트를 트리거합니다. hover()와 유사하지만, mouseenter()는 이벤트 버블링이 발생하지 않아 부모 요소와 자식 요소가 중첩된 경우 더욱 세밀한 컨트롤이 가능합니다. 실용적인 예제를 몇 가지 소개합니다.
1. 버튼 강조 효과
마우스가 버튼 위에 올라가면 색상이 변경되고, 벗어나면 원래 색상으로 돌아옵니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Highlight</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
</style>
</head>
<body>
<button class="button">Hover me</button>
<script>
$(".button").on("mouseenter", function () {
$(this).css("background-color", "#0056b3");
});
$(".button").on("mouseleave", function () {
$(this).css("background-color", "#007BFF");
});
</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>Card Shadow</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.card {
width: 300px;
height: 200px;
background-color: #f9f9f9;
margin: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s;
}
</style>
</head>
<body>
<div class="card"></div>
<script>
$(".card").on("mouseenter", function () {
$(this).css("box-shadow", "0 4px 15px rgba(0, 0, 0, 0.3)");
});
$(".card").on("mouseleave", function () {
$(this).css("box-shadow", "0 2px 5px rgba(0, 0, 0, 0.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>Menu Highlight</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.menu-item {
padding: 10px 20px;
background-color: #f4f4f4;
color: #333;
display: inline-block;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
</style>
</head>
<body>
<div class="menu-item">Home</div>
<div class="menu-item">About</div>
<div class="menu-item">Contact</div>
<script>
$(".menu-item").on("mouseenter", function () {
$(this).css({ backgroundColor: "#333", color: "#fff" });
});
$(".menu-item").on("mouseleave", function () {
$(this).css({ backgroundColor: "#f4f4f4", color: "#333" });
});
</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>Image Caption</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.image-container {
position: relative;
display: inline-block;
}
.caption {
position: absolute;
bottom: 10px;
left: 10px;
background-color: rgba(0, 0, 0, 0.6);
color: white;
padding: 5px;
display: none;
border-radius: 3px;
}
img {
width: 300px;
height: auto;
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://via.placeholder.com/300" alt="Example Image">
<div class="caption">This is a caption</div>
</div>
<script>
$(".image-container").on("mouseenter", function () {
$(this).find(".caption").fadeIn();
});
$(".image-container").on("mouseleave", function () {
$(this).find(".caption").fadeOut();
});
</script>
</body>
</html>
5. 동적 목록 항목 강조
리스트 항목에 마우스를 올리면 강조 표시됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Highlight</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
ul {
list-style: none;
padding: 0;
}
li {
padding: 10px;
background-color: #f4f4f4;
margin-bottom: 5px;
transition: background-color 0.3s;
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
$("li").on("mouseenter", function () {
$(this).css("background-color", "#ddd");
});
$("li").on("mouseleave", function () {
$(this).css("background-color", "#f4f4f4");
});
</script>
</body>
</html>
이러한 예제들은 실제 웹 프로젝트에서 쉽게 적용할 수 있는 패턴들입니다. 필요에 따라 스타일을 조정하거나 동작을 추가해 더욱 풍부한 UX를 구현할 수 있습니다.
#jquery #mouseenter() #mouseleave() #event #이벤트 #버튼강조효과 #카드그림자효과 #메뉴하이라이트 #이미지캡션표시 #동적목록항목강
반응형
'프로그램' 카테고리의 다른 글
jQuery의 focus() / blur() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.22 |
---|---|
jQuery의 dblclick() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.21 |
jQuery의 hover() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.19 |
jQuery의 click() 이벤트를 실용적으로 활용하는 기본적인 예제 (0) | 2024.11.18 |
jQuery를 사용하여 이미지를 반응형으로 만드는 방법 (0) | 2024.11.13 |
댓글