제이쿼리 hover() 이벤트 배우기

제이쿼리 이벤트 메소드 중 하나인 hover()에 대하여 알아봅니다.

제이쿼리는 다양한 이벤트 관련 메소드를 제공하는데요 만약 마우스를 특정 엘리먼트 위에 올리면 발생하게되는 이벤트 역시 제이쿼리를 사용하여 제어할 수 있습니다. 이때 사용하는 메소드가 바로 hover()입니다.

$(jqeuryElement).hover(콜백함수)

위는 간단한 문법으로 hover() 메소드 내부에 호출할 콜백을 추가하는 방법으로 사용합니다.

# 제이쿼리 hover() 메소드

이 메소드 hover()는 CSS의 :hover 선택자를 사용하는 것과 동일한 방식으로 동작합니다. 다만 css에 사용하면 새로운 스타일(style)을 적용하는 것이 목적이지만 hover()는 자바스크립트를 사용하여 다양한 조작이 가능한 점입니다.  즉 콜백 이벤트를 사용해 원하는 함수를 호출할 수 있게됩니다.

만약 제이쿼리를 사용하지 않는 경우 순수 자바스크립트의 mouseenter 그리고 mouserover 등의 이벤트와 동일하게 생각하면 됩니다.

아래는 제이쿼리에서는 hover() 메소드를 사용하여 특정 요소를 제어하는 예제를 만들어보려고 합니다. 그럼 아래 예제 코드를 보시기 바랍니다.

! jquery hover() 메소드 예제보기

이번 예제에서는 먼저 p 태그를 하나 만들고 이 태그 위에 마우스를 올릴 경우 텍스트 색을 바꾸는 간단한 예제입니다.

"p 태그 위에 마우스를 올릴 경우 색이 바뀜"

마우스를 올리고 어떻게 색을 바뀌는지 확인해보세요. 먼저 html 태그입니다.

다음은 이벤트를 구현한 스크립트입니다.

@ 예제설명
위 예제는 p태그 위에 마우스를 올릴 경우 제이쿼리 hover()에 의해서 이벤트가 발생, 해당하는 함수가 동작하게됩니다. 함수는 해당 엘리먼트를 this로 받아 또 다른 제이쿼리 메소드 css()를 사용해 색을 파란색에서 빨간색으로 바꾸게되죠. 이때 안에 함수 두 개가 연이어 콤마를 사용하여 추가되었는데 앞에 있는 함수는 마우스가 엘리먼트 위에 있을때 그리고 두 번째 함수는 엘리먼트를 벗어나는 경우 각각 실행하게 되는 콜백함수입니다.

순서대로 나타내면...

1. 마우스가 엘리먼트 위에 위치
2. 첫번째 콜백 실행하여 텍스트 색을 빨간색으로 변경
3. 마우스가 엘리먼트 안에서 벗어남
4. 두번째 콜백 실행하여 색은 파란색으로 다시 변경

# jQuery hover() 예제 직접 동작해 보기

그럼 위 예제를 직접 실행하고 동작해보겠습니다. 아래 태그 위에 마우스를 올려보세요.

제이쿼리 hover() 메소드 테스트입니다.

마우스를 위 텍스트 위에 올려보세요!

! 참고사항

제이쿼리 hover()는 자바스크립트의 두 가지 이벤트를 혼합한 것과 동일합니다. 즉 이벤트를 mousover(), mouseout()을 좀 더 쉽게 사용한다고 보시면 되죠. 다만 장점이라면 마우스오버, 마우스아웃 각각의 이벤트를 따로 등록할 필요가 없이 하나의 이벤트 메소드 hover()로 두 가지를 동시에 동작시키는 장점입니다.