A detailed explanation of the differences between MouseLeave and mouseout in jquery

Many people use jquery to achieve the mouse hover effect, generally use the mouseover and mouseout this event. In the implementation process, there may be some undesirable conditions.

First look at the effect of using mouseout:

<p> first look at the effect of using mouseout: </p><div id= "container" style= "width:300px;" ><div id= "title" style= "Cursor:pointer; Background: #ccc; " > used the Mouseout event ↓</div><div id= "list" style= "Display:none; Position:absolute; Background: #fff; border:1px solid #ccc; width:298px; " ><div> first row </div><div> second row </div><div> third row </div></div></div>< P><script type= ' Text/javascript ' > JQuery (document). Ready (function ($) {      $ ("#title"). MouseOver ( function () {          var offset = $ (this). offset ();          $ ("#list"). CSS ({left:offset.left, top:offset.top+19}). Show ();      });      $ ("#container"). Mouseout (function () {          $ ("#list"). Hide ();      });  </script>

　　

In the first row, the second row, the third row, we found that when using the Mouseout event, the mouse only moves in the drop-down container #list, which triggers hide (), because the Mouseout event is bubbling, that is, the event may be bound to the child element of the container at the same time. So our hide () will also be triggered when the mouse moves out of each child element.

2 new mouse events, MouseEnter and MouseLeave, have been added since jquery 1.3. Unlike the Mouseout event, the MouseLeave event is triggered only when the mouse pointer leaves the selected element.

Let's take a look at the effect of the MouseLeave event:

<div id= "Container2" style= "width:300px;" ><div id= "Title2" style= "cursor:pointer; Background: #ccc; " > used the MouseLeave event ↓</div><div id= "List2" style= "display:none; Position:absolute; Background: #fff; border:1px solid #ccc; width:298px; " ><div> first row </div><div> second row </div><div> third row </div></div></div>< Script type= ' Text/javascript ' > JQuery (document). Ready (function ($) {      $ ("#title2"). MouseOver (function () {          var offset = $ (this). offset ();          $ ("#list2"). CSS ({left:offset.left, top:offset.top+19}). Show ();      });      Binds the MouseLeave event, which works well      $ ("#container2"). MouseLeave (function () {          $ ("#list2"). Hide ();      });  </ Script><p>

　　

The first row, the second row, the third row, the MouseLeave and mouseout events each have a purpose, because event bubbling is useful at some point

Troubleshooting Div mouseout Event Bubbling

The workaround is to use the Bind method of jquery

For example: Now there is a div object that needs to listen for his mouse events

<div class= "dpx2" ><div class= "dpx2_px" style= "Cursor:pointer" id= "Searchsort" > Please select Sort by ↓</div>            <div class= "DPX2_PX_XL"  id= "sortlist" style= "DISPLAY:NONE;POSITION:ABSOLUTE;Z-INDEX:5;" >                <div><a class= "Sorta" > by Time Ascending ↑</a></div>                <div><a class= "Sorta" > By Time descending ↓</a></div>                <div><a class= "Sorta" > by number of comments ascending ↑</a></div> <div                ><a class= "Sorta" > by number of comments descending ↓</a></div>                <div><a class= "Sorta" > by number of clicks Ascending ↑</a ></div>                <div><a class= "sorta" > Descending by Number of clicks ↓</a></div>            </div>        </ Div>

When the mouse moves to the div with ID searchsort, the following div is displayed. Hides the div when the mouse moves out of the div below

JS is:

$(function(){                 varSortlist = $ ("#sortList"); $("#searchSort"). MouseOver (function() {                 varOffset = $ ( This). offset (); Sortlist.css ("Left", Offset.left); Sortlist.css ("Top", offset.top+20);            Sortlist.show (); });//The key sentence, the MouseLeave event that binds the Div objectSortlist.bind ("MouseLeave",function() {                $( This). Hide ();        }); });

This article source: http://www.php100.com/html/program/jquery/2013/0905/5891.html

A detailed explanation of the differences between MouseLeave and mouseout in jquery