您的位置：首页 > 其它

mouseover 事件和mouseenter 事件的不同

2017-02-25 15:15 78 查看

mouseover 事件：不论鼠标指针进入被选元素或其子元素，都会触发 mouseover 事件。对应mouseout

$("p").mouseover(function(){
$("p").css("background-color","yellow");
});

mouseenter 事件：只有在鼠标指针进入被选元素时，才会触发 mouseenter 事件。对应mouseleave

$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});

两者的不同：与
mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。请看下面例子的演示。

<html>
<head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    x = 0;
    y = 0;
    $(document).ready(function() {
        $("div.over").mouseover(function() {
            $(".over span").text(x += 1);
        });
        $("div.enter").mouseenter(function() {
            $(".enter span").text(y += 1);
        });
    });A
    </script>
</head>
<body>
    <p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
    <p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
    <div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
        <h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
    </div>
    <div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
        <h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
    </div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航