SeouliteLab

jQuery .hover() 메서드 이해하기: 요소에 마우스를 올렸을 때 처리하기 본문

프로그래밍

jQuery .hover() 메서드 이해하기: 요소에 마우스를 올렸을 때 처리하기

Seoulite Lab 2024. 4. 3. 08:15

hover() 메서드는 jQuery에서 사용되며, 마우스를 요소 위로 올렸을 때와 요소에서 마우스가 벗어났을 때를 감지합니다. 이를 통해 마우스 이벤트에 대한 처리를 간편하게 할 수 있습니다.

예제 1: 마우스를 요소 위로 올렸을 때 메시지 출력

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .hover() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#box").hover(
        function(){
          alert("마우스를 요소 위로 올렸습니다.");
        }
      );
    });
  </script>
</head>
<body>
  <div id="box" style="width: 100px; height: 100px; background-color: lightblue;"></div>
</body>
</html>

설명: 이 예제에서는 사각형 상자 위로 마우스를 올리면 "마우스를 요소 위로 올렸습니다."라는 경고창이 나타납니다.

예제 2: 요소 위에 마우스를 올렸을 때 CSS 스타일 변경

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .hover() 메서드 예제</title>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
    #box:hover {
      background-color: yellow;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="box"></div>
</body>
</html>

설명: 이 예제에서는 사각형 상자 위로 마우스를 올리면 배경색이 노란색으로 변경됩니다.

예제 3: 마우스를 요소 위로 올렸을 때 이미지 변경

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .hover() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#image").hover(
        function(){
          $(this).attr("src", "hover_image.jpg");
        },
        function(){
          $(this).attr("src", "original_image.jpg");
        }
      );
    });
  </script>
</head>
<body>
  <img id="image" src="original_image.jpg" alt="원본 이미지">
</body>
</html>

설명: 이 예제에서는 이미지 위로 마우스를 올리면 이미지가 변경됩니다.

예제 4: 요소 위에 마우스를 올렸을 때 텍스트 변경

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .hover() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#text").hover(
        function(){
          $(this).text("마우스를 요소 위로 올렸습니다.");
        },
        function(){
          $(this).text("마우스가 요소에서 벗어났습니다.");
        }
      );
    });
  </script>
</head>
<body>
  <p id="text">마우스를 요소 위로 올려주세요.</p>
</body>
</html>

설명: 이 예제에서는 텍스트 위로 마우스를 올리면 텍스트가 변경됩니다.

예제 5: 요소에 마우스를 올렸을 때 이미지 미리보기 효과

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .hover() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(".thumbnail").hover(
        function(){
          var src = $(this).attr("src");
          $("#preview").attr("src", src);
        },
        function(){
          $("#preview").attr("src", "");
        }
      );
    });
  </script>
</head>
<body>
  <img class="thumbnail" src="image1.jpg" alt="이미지1">
  <img class="thumbnail" src="image2.jpg" alt="이미지2">
  <img class="thumbnail" src="image3.jpg" alt="이미지3">

  <div>
    <p>이미지 미리보기:</p>
    <img id="preview" style="width: 200px; height: 200px;">
  </div>
</body>
</

html>

설명: 이 예제에서는 섬네일 이미지 위로 마우스를 올리면 해당 이미지가 큰 미리보기 창에 나타납니다.

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

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

jQuery jQuery.proxy() 메서드 이해하기: 함수 컨텍스트 설정하기  (0) 2024.04.03
jQuery jQuery.holdReady() 메서드 이해하기: 문서 준비 이벤트 제어하기  (0) 2024.04.03
jQuery .focusout() 메서드 이해하기: 요소가 포커스를 잃었을 때 처리하기  (0) 2024.04.03
jQuery .focusin() 메서드 이해하기: 요소에 포커스가 들어왔을 때 처리하기  (0) 2024.04.03
jQuery .focus() 메서드 이해하기: 요소에 포커스 주기  (0) 2024.04.03
'프로그래밍' Related Articles more