mouseover 与 mouseout 使用时闪烁问题

Posted phoenix6310

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>







 
以上是关于mouseover 与 mouseout 使用时闪烁问题的主要内容，如果未能解决你的问题，请参考以下文章
 

 jQuery mouseover与mouseenter,mouseout与mouseleave的区别


 Jquery hover方法使用及 mouseenter与mouseleave和 mouseover与mouseout的区别


 mouseenter与mouseover   mouseleave与mouseout 之间的区别


 jq:mouseover和mouseout多次触发解决办法


 JavaScript里mouseenter和mouseleave与mouseover和mouseout的区别


 使用 mouseover 和 mouseout 而不是 :hover