jQuery에서 호버 사용

오늘 포스팅에서는 jQuery의 .hover() 이벤트에 대해 알아보겠습니다.

jQuery에서 .hover() 사용

JQuery의 .hover() 접근 방식은 하나 또는 두 핸들러를 일치 요소에 바인딩하여 마우스 커서가 요소에 들어가고 나갈 때 동시에 완료됩니다. 바인더 핸들러에 따라 .hover() 접근 방식이 취할 수 있는 세 가지 매개변수가 있습니다.

통사론:

.hover(handlerInFn, handlerOutFn).hover(handlerInOutFn)

매개변수:

1. handlerInFn: 마우스 포인터가 요소에 들어갈 때 이 함수를 호출/실행해야 합니다.
2. handlerOutFn: 마우스 포인터가 요소를 떠날 때 이 함수를 호출/실행해야 합니다.
3. handlerInOutFn: 마우스 포인터가 요소에 들어오거나 나갈 때 이 함수를 호출/실행해야 합니다.

.hover() 접근 방식은 마우스가 활동 안팎으로 이동할 수 있도록 컨트롤러를 바인딩합니다. 마우스가 디테일 안에 있을 때 주어진 시간에 요소의 동작을 관찰하는 데 사용할 수 있습니다.

.hover() 기술은 단일 함수를 전달하더라도 마우스 입력과 출력 모두에서 해당 핸들러를 실행합니다. 이것은 핸들러 내에서 jQuery의 다양한 토글 기술을 사용하거나 event.type에 따라 핸들러 내에서 비정상적으로 응답해야 합니다.

.hover() 접근 방식에 대한 자세한 정보는 여기 문서에서 찾을 수 있습니다.

다음 예를 통해 .hover()를 이해해 보겠습니다.

HTML 코드:

<ul>
  <li>Windows</li>
  <li>Mac</li>
  <li>Linux</li>
</ul>

자바스크립트 코드:

$('li').hover(function() {
  console.log(this.textContent)
});

ul 요소를 사용하여 위의 예에서 운영 체제 목록을 설명했습니다. 목록 위로 마우스를 가져가면 요소에 대한 호버링 영향을 따르고 적절한 기능이 실행됩니다.

위의 예에서 Linux 위로 마우스를 가져가면 요소에 대한 텍스트 값이 인쇄됩니다.

jQuery를 지원하는 모든 브라우저에서 위의 코드 조각을 실행해 보십시오. 아래와 같은 결과가 표시됩니다.

출력:

"Linux"

작업 여기에서 코드 데모를 참조하십시오.