본문 바로가기
프로그램

jQuery의 mouseenter() / mouseleave() 이벤트를 활용한 실용적인 예제들

by 다온다올과함께 2024. 11. 19.

 

 

 

 

 

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 #이벤트 #버튼강조효과 #카드그림자효과 #메뉴하이라이트 #이미지캡션표시 #동적목록항목강

 

 

 

 

 

 

반응형

댓글