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

본문 바로가기

검색취소

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

검색 이전 다음 목록

본문

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() 함수는 mouseenter 와 mouseleave 이벤트들을 한번에 바인딩합니다.

$(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() 함수는 mouseenter 와 mouseleave 이벤트를 실행하게 됩니다. 이런 방법은 핸들러 안에서 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 에 있는 내용임을 밝힙니다.

등록된 댓글이 없습니다.

검색취소

jquery

검색
  • 눈여겨 볼만한 jQuery 플러그인
  • 눈여겨 볼만한 jQuery 플러그인

    이미지 갤러리.. 1. FUll Size Images Viewer- 간단한 제품사진보기, 이미지 갤러니 Thumb Nail 이미지 보기에 사용하면 제격-  http://www.addfullsize.com/ 2. Aj…

  • no image
  • 모달에 z-index 변경

    배추빌더 게시판 팝업 z-index 수정mw.lib/mw.skin.basic.lib.php                $(function() {            $("#dialog-message-$vie…

  • jQuery로 ajax 호출시 로딩중 이미지 보여주기
  • jQuery로 ajax 호출시 로딩중 이미지 보여주기

    요즘 유명 메이져사이트를 방문해보면 페이지 로딩 속도가 상당히 빨라졌다는 느낌이 들때가 있습니다. 방문자가 늘어난다고 서버시스템의 사양을 계속해서 높이거나 서버를 분산하기보다는최대한 효율적인 방법으로 서버의 부하를 …

  • no image
  • jQuery 합성이벤트 toggle() hover()

    jQuery 합성이벤트 toggle() hover() 보통 이벤트는 하나의 사용자 행위에 의해 발생한다.그리고 하나의 행동에 대해 하나의 응답을 내놓는다. 합성이벤트는 하나이상의 사용자 행위에 별개의 응답을 말하는 …

  • JQuery Hover Effects
  • JQuery Hover Effects

    첨부파일

    마우스 오버시 이벤트(이펙트)가 발생된다. 듀얼, 슬라이딩, 회전, 줌 등등 ... 7가지 이펙트를 지원해준다.워낙 유명한 사이트임.

?>