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>

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

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery .mouseout() 메서드 이해하기: 요소를 벗어날 때 발생하는 이벤트  (0) 2024.04.04
jQuery .mouseleave() 메서드 이해하기: 마우스가 요소를 벗어날 때 발생하는 이벤트  (0) 2024.04.04
jQuery .mousedown() 메서드 이해하기: 마우스 클릭 이벤트 처리  (0) 2024.04.03
jQuery .load() 메서드: 외부 콘텐츠 동적으로 불러오기  (0) 2024.04.03
jQuery .live() 메서드: 이벤트 위임을 통한 동적 요소 처리  (0) 2024.04.03
'프로그래밍' Related Articles more