본문 바로가기
프로그래밍/jQuery

jQuery API 정복 - hover(), 마우스 오버 이벤트

by zoo10 2011. 12. 26.

hover

원문 링크 http://api.jquery.com/hover/

함수들

hover( handlerIn(eventObject) , handlerOut(eventObject) )
  • .hover( handlerIn(eventObject) , handlerOut(eventObject) )
hover( handlerInOut(eventObject) )
  • .hover( handlerInOut(eventObject) )

.hover( handlerIn(eventObject), handlerOut(eventObject) )Returns : jQuery

개요 : 마우스 포인터가 요소들에 올라오거나 떠날때 실행되는 두개의 핸들러를 바인딩합니다.

  • .hover( handlerIn(eventObject), handlerOut(eventObject) )
  • handlerIn(eventObject) 마우스 포인터가 요소에 들어올 때 실행될 기능
  • handlerOut(eventObject) 마우스 포인터가 요소에서 떠날 때 실행될 기능

.hover() 함수는 mouseentermouseleave 이벤트들을 한번에 바인딩합니다.

$(selector).hover(handlerIn, handlerOut) 을 호출하면 아래와 같은 구문이 실행되는 것입니다.

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

각각 이벤트의 좀 더 자세한 내용을 보시려면 .mouseenter().mouseleave() 를 참고하세요.

예 제  
마우스 오버, 아웃 시 특정기능을 구현해보죠.

<!DOCTYPE html>
<html>
<head>
  <style>
  ul { margin-left:20px; color:blue; }
  li { cursor:default; }
  span { color:red; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li class='fade'>Chips</li>

    <li class='fade'>Socks</li>
  </ul>
<script>
$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  }, 
  function () {
    $(this).find("span:last").remove();
  }
);



//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});

</script>

</body>
</html>

미리보기

마우스를 올려 보시면 별표 3개가 나타났다 사라졌다 합니다. 아래 두개는 fade 클래스를 가지고 있고 그 클래스를 가진 요소에는 페이드 효과를 주고 있네요. onmouseover와 onmouseout 이벤트를 한방에 처리해 주고 있네요. 간단하고 유용해 보입니다.

 

예 제
테이블 셀(td)에 특정 클래스를 토글합니다.

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

 

예 제
바인딩 된 이벤트를 해제하기

$("td").unbind('mouseenter mouseleave');

 

.hover( handlerInOut(eventObject) )Returns : jQuery

개요 : 마우스 포인터가 요소들에 올라오거고 떠날때 실행되는 한개의 핸들러를 바인딩합니다.

  • .hover( handlerInOut(eventObject) )
  • handlerInOut(eventObject) 마우스 포인터가 요소에 들고 날때 실행될 기능

하나의 인자만 전달된 .hover() 함수는 mouseentermouseleave 이벤트를 실행하게 됩니다. 이런 방법은 핸들러 안에서 jQuery의 다양한 토글 함수들을 사용할 수 있게 하거나 event.type 에 따라 다른 응답을 해줄수 있습니다.

말이 무지 어렵네요. 한마디로 유연하게 상황에 대처할 수 있고 더 다양한 효과를 낼 수 있다는 정도로 의역(?)할 수 있겠네요. ^^;;

$(selector).hover(handlerInOut) 를 호출하면 아래와 같은 구문이 실행되는 겁니다.

$(selector).bind("mouseenter mouseleave", handlerInOut);

각각 이벤트의 좀 더 자세한 내용을 보시려면 .mouseenter().mouseleave() 를 참고하세요.

예 제  
마우스를 올리면 LI 가 up 또는 down 되며 슬라이딩 되고 클래스도 토글해요.

<!DOCTYPE html>
<html>
<head>
  <style>
  ul { margin-left:20px; color:blue; }
  li { cursor:default; }
  li.active { background:black;color:white; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <ul>
    <li>Milk</li>
    <li>White</li>
    <li>Carrots</li>
    <li>Orange</li>
    <li>Broccoli</li>
    <li>Green</li>
  </ul>
<script>
$("li")
.filter(":odd")
.hide()
 .end()
.filter(":even")
.hover(
  function () {
    $(this).toggleClass("active")
      .next().stop(true, true).slideToggle();
  }
);


</script>

</body>
</html>

미리보기

인덱스 기준 홀수번째 요소들을 안보이게 숨긴 후 마우스가 올라가면 보여줍니다. 보여줄때 슬라이딩 되면 나타나게 처리했네요.

 

얼핏 보면 toggleClass()와 비슷해 보이지만 hover() 함수는 마우스 이벤트가 발생했을 때 처리할 수 있다는 것이 차이점이겠네요. 좋고 유용한 함수인 것 같습니다.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.