SeouliteLab

jQuery .mouseout() 메서드 이해하기: 요소를 벗어날 때 발생하는 이벤트 본문

프로그래밍

jQuery .mouseout() 메서드 이해하기: 요소를 벗어날 때 발생하는 이벤트

Seoulite Lab 2024. 4. 4. 08:59

예제 1: 요소를 벗어날 때 메시지 출력하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mouseout() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#box").mouseout(function(){
        $("#message").text("마우스가 상자를 벗어났습니다.");
      });
    });
  </script>
</head>
<body>
  <div id="box" style="width: 200px; height: 100px; background-color: #ccc;"></div>
  <div id="message"></div>
</body>
</html>

설명: 이 예제에서는 마우스가 #box 요소를 벗어나면 메시지를 출력합니다.

예제 2: 여러 요소에 대한 마우스 이벤트 처리하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mouseout() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(".item").mouseout(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>

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

예제 3: 마우스 이벤트 전파 막기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mouseout() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#container").mouseout(function(){
        $("#message").text("마우스가 컨테이너를 벗어났습니다.");
      });
      $("#inner").mouseout(function(event){
        event.stopPropagation();
        $("#message").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="message"></div>
</body>
</html>

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

예제 4: 동적으로 요소 추가 후 마우스 이벤트 처리하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mouseout() 메서드 예제</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("mouseout", ".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 .mouseout() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("img").mouseout(function(){
        $(this).css("opacity", "0.5");
      });
    });
  </script>
</head>
<body>
  <img src="example.jpg" style="width: 300px;">
</body>
</html>

설명: 이 예제에서는 이미지에 마우스를 올려놓으면 투명도가 50%로 변경됩니다.

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

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

jQuery .mouseup() 메서드: 마우스 버튼을 놓을 때 발생하는 이벤트  (0) 2024.04.04
jQuery .mouseover() 메서드: 요소에 마우스를 올렸을 때 발생하는 이벤트  (0) 2024.04.04
jQuery .mouseleave() 메서드 이해하기: 마우스가 요소를 벗어날 때 발생하는 이벤트  (0) 2024.04.04
jQuery .mouseenter() 메서드: 요소에 마우스가 진입할 때 발생하는 이벤트  (0) 2024.04.03
jQuery .mousedown() 메서드 이해하기: 마우스 클릭 이벤트 처리  (0) 2024.04.03
'프로그래밍' Related Articles more