Examples explain the difference between MouseLeave and mouseout in jquery _jquery

This paper introduces the difference between MouseLeave and mouseout in jquery, and share it with you for your reference, the specific contents are as follows
Many people use jquery to implement the mouse hover effect, generally use the mouseover and mouseout this pair of events. And in the implementation process, there may be some unsatisfactory situation.
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 line </div>
<div> second line </div> <div>
third line </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>

First row, second row, third row we found that when using the Mouseout event, the mouse Triggers hide () as soon as it moves in the #list of the Drop-down container, 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 it triggers our hide () when the mouse moves out of each child element. The
added 2 mouse events, MouseEnter and MouseLeave, starting with 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 line </div>
<div> second line </div> <div>
third line </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 (); 
   Bind the MouseLeave event, the effect is good 
   $ ("#container2"). MouseLeave (function () { 
     $ ("#list2"). Hide (); 
   } 
); </script>
<p>

The second line of the first line the third row MouseLeave and Mouseout events are useful because event bubbling is very helpful at some point
Resolving the issue of 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 monitor his mouse events

<div class= "dpx2" ><div class= "dpx2_px" style= "cursor:pointer;" id= "Searchsort" > Please select a Sort method ↓</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" > Descending by Time ↓</a></div>
        <div><a class= "Sorta" > by comment Quantity 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" > click number Descending ↓</a></div>
      </div>
    </ Div>

When the mouse moves to the div with ID searchsort, the following div is displayed. When the mouse moves out of the div below, hide the div
JS is:

 $ (function () {
         var sortlist = $ ("#sortList");
      $ ("#searchSort"). MouseOver (function () {
         var offset = $ (this). offset ();
        Sortlist.css ("left", offset.left);
        Sortlist.css ("Top", offset.top+20);
        Sortlist.show ();
      });
The key sentence is to bind a Div object's MouseLeave event
      sortlist.bind ("MouseLeave", function () {
        $ (this). Hide ();
      }
    );

According to the above explanation, the simulation realizes the Drop-down effect:
1. The Mouseout event is triggered regardless of whether the mouse pointer leaves the selected element or any child elements.

2. The MouseLeave event is triggered only when the mouse pointer leaves the selected element.

<div class= "Sel_box" > <input type= "button" value= "Select your department" id= "sel_dept"/> <div class= "Hide" id= "sel_ Dept_sh "style=" Display:none; " > <p> <font> shenzhen company </font> </p> <p> <font> Group Management </font&gt
    ; </p> </div> </div> <script type= "Text/javascript" > $ (". Sel_box"). Click (Function (event) {if (
       Event.target.id = = ' Sel_dept ') {$ ("#sel_dept_sh"). Show ();//Display Drop-down box $ ("#sel_dept_sh p Font"). Click (function () {
       $ ("#sel_dept"). Val (');
      var text = $ (this). text ();
       alert (text);
       $ ("#sel_dept"). Val (text). CSS ("Color", "#000");
     $ ("#sel_dept_sh"). Hide ();
 
   });
   }else{$ ("#sel_dept_sh"). Hide ();
 
}
   
 
});  
  $ (". Sel_box"). Bind ("MouseLeave", function () {///with MouseLeave implements the effect of imitating a drop-down box $ (this). Find (". Hide"). Hide ();
 
});  
  $ (". Sel_box"). Bind ("Mouseout", function () {//And mouseout is not, and when will trigger $ (this). Find (". Hide"). Hide ();
}); </script>

The above is the entire content of this article, I hope to help you learn.