When mouseout and mouseover have child elements in the jQuery event-JS Tutorial-php.cn

When mouseout and mouseover have child elements in the jQuery event

黄舟

Release： 2017-06-28 14:15:28

Original

1578 people have browsed it

Everyone is familiar with the mouseout and mouseover events, which are mouse out and mouse over events, but some people still don’t know that when there are child elements, the mouse will also be moved out and over the child elements. Triggered again. You can look at an example:

<html><head>  
  
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />  
  
<title>mouseout子元素的触发</title>  
  
<script type="text/javascript" src="jquery.min.js"></script>  

<style>
  #list{width:100px;padding:10px;border:1px solid #ccc;background:#FFF;}

  #list ul{margin:0;padding:0;background:#333;}

  #list ul li{list-style:none;margin-bottom:5px;}

  #list ul li a:hover{background:#666;color:#FFF;}

  </style>

</head>  
  
<body>  
  
<a href="#" id="showList">鼠标请过来</a>  
  
<div id="list" style="display:none;">  
  
    <ul>  
  
        <li><a href="#">选项一</a></li>  
  
        <li><a href="#">选项二</a></li>  
  
        <li><a href="#">选项三</a></li>  
  
        <li><a href="#">选项四</a></li>  
  
        <li><a href="#">选项五</a></li>  
  
    </ul>  
  
</div>  
  
</body>  
  
<script type="text/javascript">  
  
    $("#showList").bind("mouseover",function(){  
  
        $("#list").toggle(&#39;fast&#39;);  
  
    }); 
  
      
  
    $("#list").bind("mouseout",function(){  
  
        $(this).slideUp(&#39;fast&#39;);  
  
    });
  
</script>  
  
</html>

Copy after login

The original intention of this example is to open a list box and select an option. The list box is closed when the mouse moves away, but the fact is that the list box is closed as long as the mouse is moved over it. The reason is that the list is bound to a mouseout event. Because the list has many sub-elements, it is agreed that the mouse pass event of ul and li will be triggered. That is to say, when the mouse moves out of ul and li, the mouseout event will also be triggered. .

There are many ways to solve it. This article uses the two events corresponding to jquery, mouseenter and mouseleave.

As long as the mouseout event name is changed to mouseleave, you are done. Hehe, easy! jquery has been thought of. ^_^,

Mouseleave: Unlike the mouseout event, the mouseleave event will only be triggered when the mouse pointer leaves the selected element. If the mouse pointer leaves any child element, the mouseout event will also be triggered. Example

MouseEnter: Unlike the mouseover event, the mouseenter event will only be triggered when the mouse pointer passes through the selected element. If the mouse pointer passes through any child element, the mouseover event will also be triggered.

The above is the detailed content of When mouseout and mouseover have child elements in the jQuery event. For more information, please follow other related articles on the PHP Chinese website!