jQuery 이벤트 mouseover, mouseout 및 hover의 차이점

얼마 전, 책가방을 위로 밀면 타오바오와 QQ 스페이스 상단에 표시되는 드롭다운 메뉴 효과를 흉내내고 싶었는데, IE6에서는 마우스 오버이벤트가 발생하는 것으로 나타났습니다. div 내부에서 마우스가 계속 움직일 때마다 인터넷에서 이 글을 찾았는데, 실제로 API에 설명이 있는데, 같은 문제를 겪고 있는 친구들은 볼 수 없을 것 같습니다. 이 글을 읽고 영감을 얻었습니다.
jquery에는 실제로 마우스오버와 마우스아웃이 두 ​​가지가 있다는 생각이 들었습니다. 이 이벤트는 호버 이벤트와 동일합니다. 둘 사이에는 차이가 없으며 동일해야 합니다. 하지만 어제 animation 효과를 보고 그 둘이 동일하지 않다는 것을 깨달았습니다.

<div class="wrapper">

< div class="img"></div>

< div class="text"></div>

< /div>

< div class="point"></div>

래퍼에 이벤트를 추가하고 마우스가 래퍼로 이동하면 클래스="포인트"인 레이어가 확대됩니다. 하지만 mouseover 및 mouseout 이벤트를 사용하면 마우스가 래퍼 레이어로 이동하면 포인트 레이어가 더 커집니다.

하지만 마우스가 img 레이어와 텍스트 레이어 사이를 이동할 때 포인트 레이어는 계속해서 커지고 작아집니다. . 이것은 우리가 원하는 결과가 아닙니다. 우리가 원하는 것은 img이든 text이든 마우스가 래퍼 레이어에 있는 한 포인트가 커지지만 마우스가 래퍼 레이어 밖으로 이동하지 않은 경우에는 포인트 레이어는 작아지지 않습니다.

점차 아이디어가 명확해졌습니다. 마우스오버와 마우스아웃 대신 호버를 사용하여 문제를 해결했습니다.

이렇게 간단한 문제를 해결하는데 오랜 시간이 걸렸다는 것은 정말 과장입니다. 기념품으로 일기를 써보세요.

추가: 나중에 제 스승님께서 jquery 소스 코드에 실제로 다음 단락이 있다고 말씀하셨습니다.

hover: function( fnOver, fnOut ) {
return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
}

즉, hover를 말하는 것입니다! = 마우스오버+마우스아웃. 그러나 hover=mouseenter + mouseleave.

위 내용은 jQuery 이벤트 mouseover, mouseout 및 hover의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!