mouseover 和 mouseenter

最新推荐文章于 2024-09-12 16:31:59 发布

友人C君~

最新推荐文章于 2024-09-12 16:31:59 发布

阅读量165

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

原文链接：http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseenter_mouseover

JavaScript 专栏收录该内容

71 篇文章

订阅专栏

本文通过实例对比了mouseover和mouseenter两个鼠标事件的区别。mouseover事件会在鼠标指针穿过元素或其子元素时触发，而mouseenter事件仅在鼠标指针直接穿过元素本身时触发。通过HTML、CSS和JavaScript代码演示，读者可以直观地看到两种事件触发次数的不同。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

<!Doctype 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);
            });
        });
    </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>