SeouliteLab

jQuery .mouseenter() 메서드: 요소에 마우스가 진입할 때 발생하는 이벤트 본문

프로그래밍

jQuery .mouseenter() 메서드: 요소에 마우스가 진입할 때 발생하는 이벤트

Seoulite Lab 2024. 4. 3. 13:13

예제 1: 요소에 마우스 진입 감지하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mouseenter() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#box").mouseenter(function(){
        $("#result").text("마우스가 박스 안으로 진입했습니다.");
      });
    });
  </script>
</head>
<body>
  <div id="box" style="width: 200px; height: 100px; background-color: #ccc;"></div>
  <div id="result"></div>
</body>
</html>

설명: 이 예제에서는 마우스가 #box 요소 안으로 진입하면 결과를 표시합니다.

예제 2: 여러 요소에 대한 마우스 진입 감지하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mouseenter() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(".item").mouseenter(function(){
        $(this).css("color", "red");
      });
    });
  </script>
  <style>
    .item { margin: 10px; padding: 10px; border: 1px solid #000; }
  </style>
</head>
<body>
  <div class="item">아이템 1</div>
  <div class="item">아이템 2</div>
  <div class="item">아이템 3</div>
</body>
</html>

설명: 이 예제에서는 .item 클래스를 가진 여러 요소에 대해 마우스가 진입하면 글자 색상을 빨간색으로 변경합니다.

예제 3: 하위 요소에 대한 마우스 진입 감지하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mouseenter() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#container").mouseenter(function(){
        $("#result").text("마우스가 컨테이너 안으로 진입했습니다.");
      });
      $("#inner").mouseenter(function(event){
        event.stopPropagation();
        $("#result").text("마우스가 내부 요소로 진입했습니다.");
      });
    });
  </script>
  <style>
    #container { width: 200px; height: 100px; background-color: #ccc; padding: 20px; }
    #inner { width: 100px; height: 50px; background-color: #f00; }
  </style>
</head>
<body>
  <div id="container">
    <div id="inner"></div>
  </div>
  <div id="result"></div>
</body>
</html>

설명: 이 예제에서는 내부 요소에 대한 마우스 진입 이벤트가 외부 컨테이너의 이벤트에 영향을 미치지 않도록 이벤트 전파를 막습니다.

예제 4: 동적으로 요소 추가 후 마우스 진입 감지하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mouseenter() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#container").append("<div class='item'>새로운 아이템</div>");
      });
      $("#container").on("mouseenter", ".item", function(){
        $(this).css("color", "blue");
      });
    });
  </script>
  <style>
    .item { margin: 10px; padding: 10px; border: 1px solid #000; }
  </style>
</head>
<body>
  <button>새로운 아이템 추가</button>
  <div id="container">
    <div class="item">아이템 1</div>
    <div class="item">아이템 2</div>
    <div class="item">아이템 3</div>
  </div>
</body>
</html>

설명: 이 예제에서는 동적으로 추가된 요소에 대해서도 마우스 진입 이벤트를 감지합니다.

예제 5: 이미지에 대한 마우스 진입 감지하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mouseenter() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#image").mouseenter(function(){
        $("#result").text("이미지에 마우스가 진입했습니다.");
      });
    });
  </script>
</head>
<body>
  <img src="example.jpg" id="image">
  <div id="result"></div>
</body>
</html>

설명: 이 예제에서는 이미지에 마우스가 진입하면 결과를 표시합니다.