Examples to explain the difference between mouseleave and mouseout in jquery_jquery

This article introduces in detail the difference between mouseleave and mouseout in jQuery, and shares it with you for your reference. The specific content is as follows
When many people use jQuery to implement mouse hover effects, they generally use the mouseover and mouseout events. During the implementation process, some undesirable situations may occur.
Let’s take a look at the effect of using mouseout first:

<p>先看下使用mouseout的效果：</p>
<div id="container" style="width: 300px;">
<div id="title" style="cursor: pointer; background: #ccc;">使用了mouseout事件↓</div>
<div id="list" style="display: none; position: absolute; background:#fff; border: 1px solid #ccc; width: 298px;">
<div>第一行</div>
<div>第二行</div>
<div>第三行</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>

Line 1, Line 2, Line 3 We found that when using the mouseout event, hide() is triggered as soon as the mouse moves in the drop-down container #list. This is actually because the mouseout event bubbles up, that is The event may be bound to the child elements of the container at the same time, so our hide() will be triggered when the mouse moves out of each child element.
Two new mouse events have been added since jQuery 1.3, mouseenter and mouseleave. Unlike the mouseout event, the mouseleave event is only triggered 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;">使用了mouseleave事件↓</div>
<div id="list2" style="display: none; position: absolute; background:#fff; border: 1px solid #ccc; width: 298px;">
<div>第一行</div>
<div>第二行</div>
<div>第三行</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(); 
   }); 
   // 绑定mouseleave事件，效果很好 
   $("#container2").mouseleave(function() { 
     $("#list2").hide(); 
   }); 
 }); 
</script>
<p>

First line, second line, third line mouseleave and mouseout events have their own uses, because event bubbling is very useful at certain times
Solve the problem of div mouseout event bubbling
The solution is to use jquery’s bind method
For example: There is now a div object that needs to monitor its mouse events

<div class="dpx2"><div class="dpx2_px" style="cursor:pointer;" id="searchSort">请选择排序方式↓</div>
      <div class="dpx2_px_xl" id="sortList" style="display:none;position:absolute;z-index:5;">
        <div><a class="sortA">按时间升序↑</a></div>
        <div><a class="sortA">按时间降序↓</a></div>
        <div><a class="sortA">按评论数量升序↑</a></div>
        <div><a class="sortA">按评论数量降序↓</a></div>
        <div><a class="sortA">按点击数升序↑</a></div>
        <div><a class="sortA">按点击数降序↓</a></div>
      </div>
    </div>

When the mouse moves over 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();
      });
//关键的一句，绑定Div对象的mouseleave事件
      sortList.bind("mouseleave", function() {
        $(this).hide();
      });
    });

According to the above explanation, simulate the drop-down effect:
1. Regardless of whether the mouse pointer leaves the selected element or any child element, the mouseout event will be triggered.

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

<div class="sel_box">
  <input type="button" value="请选择所属部门" id="sel_dept" />
  <div class="hide" id="sel_dept_sh" style="display: none;">
    <p>
      <font>深圳市公司 </font>
    </p>
    <p>
      <font>集团管理层 </font>
    </p>
  </div>
</div>
 
<script type="text/javascript">
$(".sel_box").click(function(event){
   if(event.target.id == 'sel_dept'){
     $("#sel_dept_sh").show(); //显示下拉框
     $("#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(){//用mouseleave就实现了模仿下拉框的效果
    $(this).find(".hide").hide();  
  });
 
$(".sel_box").bind("mouseout",function(){//而mouseout则不行，什么时候都会触发
    $(this).find(".hide").hide();  
  });
</script>

The above is the entire content of this article, I hope it will be helpful to everyone’s study.