jQuery 中 mouseover 与 mouseout 使用时闪烁问题 



区别：




mouseover与mouseenter




　　不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。




　　只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。




mouseout与mouseleave




　　不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。




　　只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id1 {
            width: 300px;
            height: 300px;
            background-color: #c77bff;
            margin: 50px auto;
        }

        #id2 {
            width: 70px;
            height: 70px;
            background-color: #94ff74;
            display: none;
            margin: 50px 0 0 230px;
        }
    </style>
</head>
<body>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<div id="id1">
    <div id="id2">
    </div>
</div>
<script type="text/javascript">
  var timer;
  $("#id1").mouseover(function () {
    $('#id2').show();
    if (timer) {
      clearTimeout(timer)
    }
  }).mouseout(function () {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(function () {
      $('#id2').hide();
    }, 300)
  });
</script>
</body>
</html>







 







		

		
posted @ 
2018-07-05 18:01 
phoenix6310 
阅读(240) 
评论(0) 
 
收藏 
举报