The difference between jQuery events mouseover, mouseout and hover

Not long ago I wanted to imitate the effect of a drop-down menu being displayed on the top of the school bag on Taobao and QQ space when you slide it up. It turned out that under IE6, the mouseover would keep starting when moving the mouse inside the divEvent, I was wondering, I found this article on the Internet, there is actually an explanation in the API, but I didn’t see it, I believe friends with the same problem will be inspired after reading this article
I have always I thought that in jquery, the mouseover and mouseout events are actually equal to the hover event. There is no difference between the two, they should be the same. But yesterday an animation effect made me realize that the two are not equivalent.

<div class="wrapper">

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

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

< /div>

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

Add an event to the wrapper, and when the mouse moves to the wrapper, the layer with class="point" will be enlarged. But if you use mouseover and mouseout events, when the mouse moves to the wrapper layer, the point layer will become larger.
But when the mouse moves between the img and text layers, the point layer will become larger or smaller. No. Stopped changes. This is not the result we want. What we want is that as long as the mouse is on the wrapper layer,
whether it is img or text, the point will become larger, but when the mouse has not moved out of the wrapper layer, the point layer will not become smaller.

Slowly the idea became clear. We solved the problem by using hover instead of mouseover and mouseout.

It’s really an exaggeration that it took us a long time to solve such a simple problem. Write a journal as a souvenir.

Supplement: Later, my master said that there is actually such a paragraph in the jquery source code:

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

That is to say hover! = mouseover+mouseout. But hover=mouseenter + mouseleave.

The above is the detailed content of The difference between jQuery events mouseover, mouseout and hover. For more information, please follow other related articles on the PHP Chinese website!