jQuery_jquery에서 hover, mouseover, mouseout의 차이점 분석

이 글은 jQuery에서 hover, mouseover, mouseout의 차이점을 예시를 통해 분석합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

저는 jquery에서 mouseover 및 mouseout 이벤트가 실제로 hover 이벤트와 동일하다고 생각했습니다. 둘 사이에는 차이가 없으며 동일해야 합니다. 그러나 어제 애니메이션 효과를 통해 그 둘이 동등하지 않다는 것을 깨달았습니다.

<div class="wrapper">
<div class="img"></div>
<div class="text"></div>
</div>
<div class="point"></div>

Wrapper에 이벤트를 추가하고, Wrapper로 마우스를 이동하면 class="point"인 레이어가 확대됩니다. 그러나 mouseover 및 mouseout 이벤트를 사용하면 마우스가 래퍼 레이어로 이동하면 포인트 레이어가 커지지만 img 레이어와 텍스트 레이어 사이에서 마우스를 이동하면 포인트 레이어가 점점 커지고 작아지며 끊임없이 변화합니다. . 이것은 우리가 원하는 결과가 아닙니다. 우리가 원하는 것은 img이든 text이든 마우스가 래퍼 레이어에 있는 한 포인트가 커지지만 마우스가 래퍼 레이어 밖으로 이동하지 않으면 포인트 레이어는 작아지지 않습니다.

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

이렇게 간단한 문제를 해결하는데 오랜 시간이 걸렸다고 해도 과언이 아닙니다. 기념할 만한 글을 쓰세요.

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

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

즉, 호버! =마우스오버 마우스아웃. 그러나 hover=mouseenter mouseleave.

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.