Examples show the difference between mouseleave and mouseout in jquery

This paper introduces the differences between mouseleave and mouseout in jQuery in detail and shares them with you for your reference. The specific content is as follows
Many people use the mouseover and mouseout events in general when using jQuery to achieve the hover effect. During the implementation process, some undesirable situations may occur.
Take a look at the effects of using mouseout:

<p> So let's look at the usage mouseout The effect of: </p>
<div id="container" style="width: 300px;">
<div id="title" style="cursor: pointer; background: #ccc;"> Using the mouseout Event left </div>
<div id="list" style="display: none; position: absolute; background:#fff; border: 1px solid #ccc; width: 298px;">
<div> The first 1 line </div>
<div> The first 2 line </div>
<div> The first 3 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>

In line 1, line 2, and line 3, we find that hide() is triggered when the mouse moves the 1 in the drop-down container #list. This is because the mouseout event bubbles, meaning that the event may be bound to the child element of the container at the same time, so moving the mouse out of each child element triggers our hide() as well.
Two 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 look at the effect of mouseleave event in 1:

<div id="container2" style="width: 300px;">
<div id="title2" style="cursor: pointer; background: #ccc;"> Using the mouseleave Event left </div>
<div id="list2" style="display: none; position: absolute; background:#fff; border: 1px solid #ccc; width: 298px;">
<div> The first 1 line </div>
<div> The first 2 line </div>
<div> The first 3 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(); 
   }); 
   //  The binding mouseleave Events, very good results  
   $("#container2").mouseleave(function() { 
     $("#list2").hide(); 
   }); 
 }); 
</script>
<p>

The mouseleave and mouseout events in line 1, line 2, and line 3 have their own uses, because event bubbling can be very useful at some point
Resolve div mouseout incident bubbling problem
The solution is to use bind's method
For example, there is now an div object that needs to listen to its mouse events

<div class="dpx2"><div class="dpx2_px" style="cursor:pointer;" id="searchSort"> Please select sort mode ↓ </div>
      <div class="dpx2_px_xl" id="sortList" style="display:none;position:absolute;z-index:5;">
        <div><a class="sortA"> Ascending by time ↑ </a></div>
        <div><a class="sortA"> Descending order by time ↓ </a></div>
        <div><a class="sortA"> Ascending ↑ by number of comments </a></div>
        <div><a class="sortA"> Descending order by number of comments ↓ </a></div>
        <div><a class="sortA"> Click through ascending ↑ </a></div>
        <div><a class="sortA"> Click on descending order ↓ </a></div>
      </div>
    </div>

When the mouse moves over Div, ID for searchSort, displays div below. Hide div when mouse over div below
JS as follows:

 $(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 of 1 Sentence, binding Div The object's mouseleave The 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 element.

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

<div class="sel_box">
  <input type="button" value=" Please 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>
    </p>
  </div>
</div>
 
<script type="text/javascript">
$(".sel_box").click(function(event){
   if(event.target.id == 'sel_dept'){
     $("#sel_dept_sh").show(); // Show the 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 This mimics the drop-down box effect 
    $(this).find(".hide").hide();  
  });
 
$(".sel_box").bind("mouseout",function(){// while mouseout No, when will it trigger 
    $(this).find(".hide").hide();  
  });
</script>

Above is the entire content of this article, I hope to help you with your study.