[jQuery] 마우스 오버 이벤트 - .hover()

 

 

jQuery의 .hover() 함수

jQuery의 .hover() 함수는 제이쿼리의 마우스 이벤트 함수중 하나입니다.

.hover() 함수로 선택한 요소에 마우스 포인트를 올렸을 때와 떠났을 때 이벤트 효과를 넣을 수 있습니다.

마우스의 다양한 이벤트 관련 메서드 중 하나로 특정 엘리먼트 위에 올리게 되면 발생하는 이벤트 중 하나입니다. hover() 함수는 CSS의 :hover 선택자를 사용하는 것과 동일한 방식으로 동작을 하게 되지만 css에 사용할 때에는 새로운 스타일을 적용하는 것이 목적이지만 제이쿼리(jQuery)는 이벤트를 적용하기 위한 조작임을 잊지 말아야 합니다.

자바스크립트(javascript)의 mouserover 등의 이벤트와 동일하다고 생각하면 됩니다.

 

// .hover() 함수 사용법
.hover( handlerIn(event), handlerOut(event) )


//handlerIn - 마우스 포인트를 올렸을때
//handlerOut - 마우스 포인트를 벗어났을때

 

//hover 함수를 통하여 컬러 바꾸기

<p id="test">hover() 메소드 테스트</p>


<script>

$('#test').hover(function() {
  $(this).css("color", "red");
}, function(){
  $(this).css("color", "blue");
});

</script>