Home >Web Front-end >JS Tutorial >When mouseout and mouseover have child elements in the jQuery event

When mouseout and mouseover have child elements in the jQuery event

黄舟Original: 2017-06-28 14:15:281683browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Solution to the problem of moving between two elements with the same mouseover in jQueryNext article：Solution to the problem of moving between two elements with the same mouseover in jQuery

See more

When mouseout and mouseover have child elements in the jQuery event

Related articles