jQuery事件中mouseout和mouseover有子元素的情况-js教程-PHP中文网

jQuery事件中mouseout和mouseover有子元素的情况

黄舟

发布： 2017-06-28 14:15:28

原创

1641人浏览过

大家都熟悉mouseout 和 mouseover事件，就是鼠标移出和鼠标掠过事件，但是还是有部分人不知道在有子元素的情况下，同时还会鼠标的移出和掠过子元素的时候都会在中再一次触发。可以看个例子：

<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('fast');  
   
    }); 
   
    $("#list").bind("mouseout",function(){  
   
        $(this).slideUp('fast');  
   
    });
   
</script>  
   
</html>