[jQuery] .hover() - 마우스 포인트가 요소에 올라오거나 벗어날 때 함수를 실행하는 메서드

안녕하세요. 경제적, 시간적 자유를 꿈꾸는 한량입니다.

jQuery에서 .hover() 사용법

jQuery에서 .hover()는 HTML 요소에 마우스 커서가 

올라갔을 때와 내려갔을 때의 이벤트를 처리하는 함수입니다.

 

hover() 함수는 두 개의 콜백 함수를 인자로 받고  
첫 번째 함수는 마우스가 요소에 올라갔을 때 실행되고, 

두 번째 함수는 마우스가 요소에서 내려갔을 때 실행됩니다. 

 

간단한 예문으로 hover() 함수가 어떻게 작동하는지 알아보겠습니다.

아래 코드는 "hover over me"라는 문장이 있는 

div 요소에 마우스를 올리면 배경색이 빨간색으로 바뀌고, 
마우스를 내리면 다시 원래의 색으로 돌아가는 예제입니다.

// javascript code
$("#hover-me").hover(
  function() {
    $(this).css("background-color", "red");
  }, 
  function() {
    $(this).css("background-color", "");
  }
);

// html code
<div id="hover-me">hover over me</div>

마우스 커서가 div 위에 올라오면 첫 번째 콜백 함수에서는 

css() 함수를 사용하여 배경색을 빨간색으로 변경하고, 

마우스 커서가 div에서 벗어나면 두 번째 콜백 함수에서는

css() 함수를 사용하여 배경색을 다시 원래대로 돌려놓습니다.

이렇게 hover() 함수를 사용하면 마우스 이벤트를 처리하는 

코드를 간단하게 작성할 수 있습니다.