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

最新推荐文章于 2020-09-08 20:04:47 发布

weixin_30685047

最新推荐文章于 2020-09-08 20:04:47 发布

阅读量167

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/phoenix6310/p/9269774.html

本文详细解释了鼠标悬停事件中的mouseover与mouseenter以及mouseout与mouseleave的区别，并通过一个示例展示了这些事件的应用。当鼠标指针穿过被选元素或其子元素时会触发mouseover事件；而仅当鼠标指针穿过被选元素时才触发mouseenter事件。mouseout事件会在鼠标离开被选元素及其子元素时触发；mouseleave则只在鼠标离开被选元素时触发。

区别：

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>