Analysis of the differences between hover, mouseover and mouseout in jQuery_jquery

This article analyzes the differences between hover, mouseover and mouseout in jQuery with examples. Share it with everyone for your reference, the details are as follows:

I always thought that in jquery, the two events mouseover and mouseout are 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 the 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 and smaller, constantly changing. . 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 does not move 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 an article to commemorate.

Supplement: Later my master said that there is actually this 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.

I hope this article will be helpful to everyone in jQuery programming.