Differences between hover, mouseover, and mouseout in jQuery

This article mainly introduces the differences between hover, mouseover, and mouseout in jQuery, and analyzes the differences and usage skills between hover, mouseover, and mouseout in jQuery based on examples, for more information about hover, mouseover, and mouseout in jQuery, see the examples in this article. We will share this with you for your reference. The details are as follows:

Previously, I always thought that the mouseover and mouseout events in jquery are equivalent to hover events. There is no difference between the two. They should be the same. However, I was only able to see an animated effect yesterday. These two cannot be the same.

Add events to wrapper. When you move the mouse over wrapper, the layer of class = "point" is enlarged. However, if the mouseover and mouseout events are used, 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 the point will become larger as long as the mouse is on the wrapper layer, whether it is img or text, however, when the mouse is not removed from the wrapper layer, the point layer remains unchanged.

The idea is clear, so we can solve the hover problem without using mouseover and mouseout.

It took us a long time to solve such a simple problem. Write an article to commemorate.

Supplement: My master said that there is such a section in jquery source code:

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

That is, hover! = Mouseover + mouseout. But hover = mouseenter + mouseleave.

I hope this article will help you with jQuery programming.