Differences between hover, mouseover, and mouseout in jQuery,

Differences between hover, mouseover, and mouseout in jQuery,

This document analyzes the differences between hover, mouseover, and mouseout in jQuery. 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.

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

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.

Articles you may be interested in:

• How to Implement hover Event Synthesis Using jQuery
• How to Use hover and toggle methods in jQuery
• Examples of common events such as bind, hover, and toggle in jquery
• Example of how jQuery's live () method handles hover events
• Example of mouseover event usage in jQuery
• Style flashing occurs when a child element exists in the extension Jquery plug-in for processing mouseover.
• The difference between mouseleave and mouseout in jquery imitates the drop-down box Effect