CSS에서 호버 이벤트를 제거하는 방법

CSS 호버 이벤트를 제거하는 방법: 1. "$("a").hover(function(){ Alert('mouseover'); }, function(){을 통해 2. "$('a').off('mouseenter').unbind('mouseleave');" 메소드를 통해 호버 이벤트를 바인딩 해제합니다. 예.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3 버전, DELL G3 컴퓨터

CSS에서 호버 이벤트를 제거하는 방법

호버를 취소하고 바인딩하는 올바른 방법은 무엇입니까? event in jquery

웹 디자인에서는 jquery를 사용하여 마우스 호버 이벤트에 응답하는 경우가 많습니다. 이는 mouseover 및 mouseout 이벤트와 동일한 효과를 가지지만 on을 사용하여 hover 메서드를 바인딩하는 방법과 off를 사용하여 바인딩을 해제하는 방법 ? ?

1. hover 이벤트를 바인딩하는 방법

먼저 다음 코드를 살펴보세요. 클릭 및 hover 이벤트를 a 태그에 바인딩한다고 가정해 보겠습니다.

$(document).ready(function(){ $('a').on({ hover: function(e) {
 //Hover event handler
alert("hover"); },
click: function(e) { // Click event handler
alert("click"); } });
});

a 태그를 클릭하면 이상한 일이 발생합니다. 바운드 hover 이벤트는 전혀 응답하지 않지만 바운드 클릭 이벤트는 정상적으로 응답합니다.

그러나 쓰기 방법을 변경하는 경우(예:

$("a").hover(function(){ alert('mouseover'); }, function(){
alert('mouseout'); })

대신 mouseenter 및 mouseleave 이벤트를 사용해야 합니다. () 함수입니다. )

따라서 다음과 같이 직접 인용할 수 있습니다.

$(document).ready(function(){ $('a').on({ mouseenter: function(e) {
//Hover event handler
alert("mouseover"); }, mouseleave: function(e) {
//Hover event handler
alert("mouseout"); }, click: function(e) {
// Clickevent handler
alert("click"); } });
});

.hover()는 jQuery 자체 정의 이벤트이므로 사용자의 편의를 위해 mouseenter 및 mouseleave 이벤트를 바인딩하고 호출합니다. 실제 이벤트가 아니므로 당연히 .on()에서 이벤트 매개변수로 호출할 수 없습니다.

2. hover 이벤트를 취소하는 방법

off 함수를 사용하여 바인딩된 이벤트를 취소할 수 있다는 것은 누구나 알고 있습니다. 하지만 바인딩된 이벤트만 취소할 수 있습니다. jquery의 hover 이벤트는 매우 특별합니다. 이벤트가 이런 방식으로 바인딩되어 있으면 취소할 수 없습니다.

$("a").hover(function(){ alert('mouseover'); }, function(){
alert('mouseout'); })

바운드 hover 이벤트를 취소하는 올바른 방법:

$('a').off('mouseenter').unbind('mouseleave');

추천 학습: "css video" Tutorial》 《jQuery Video Tutorial》

위 내용은 CSS에서 호버 이벤트를 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!