📌  相关文章
📜  jQuery mouseout()(1)

📅  最后修改于: 2023-12-03 14:43:11.061000             🧑  作者: Mango

jQuery mouseout()

一、概述

mouseout() 是 jQuery 中的一个事件处理函数，它可以在鼠标移开一个元素时触发。通常与 mouseover() 一起使用，实现鼠标经过一个元素时的交互效果。

二、语法
$(selector).mouseout(function)
  • selector：必需，待绑定事件的元素选择器。
  • function：必需，事件处理函数。
三、示例
1. 用法示例
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery mouseout()</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: coral;
            margin: 20px;
            float: left;
            text-align: center;
            line-height: 100px;
            color: white;
        }
        .box1 {
            background-color: crimson;
        }
        .box2 {
            background-color: darkslategray;
        }
        .box3 {
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <div class="box1">Box 1</div>
    <div class="box2">Box 2</div>
    <div class="box3">Box 3</div>
    <script>
        $(".box1").mouseover(function() {
            $(this).text("I'm Hovered!");
        }).mouseout(function() {
            $(this).text("Box 1");
        });
        $(".box2").mouseover(function() {
            $(this).text("I'm Hovered!");
        }).mouseout(function() {
            $(this).text("Box 2");
        });
        $(".box3").mouseover(function() {
            $(this).text("I'm Hovered!");
        }).mouseout(function() {
            $(this).text("Box 3");
        });
    </script>
</body>
</html>

代码说明：

当鼠标移到每个盒子上时，盒子的文字内容会改变为 “I'm Hovered!”；当鼠标移开盒子时，文字内容会恢复原样。

2. 链式调用示例
$(".box1").mouseover(function() {
    $(this).text("I'm Hovered!");
}).mouseout(function() {
    $(this).text("Box 1");
});

代码说明：

mouseout() 与 mouseover() 一起使用，可以实现交互效果。示例中对 .box1 添加了 mouseover() 事件和 mouseout() 事件，并且通过链式调用共用了一个函数，实现了代码简化。

四、注意事项
  • mouseout() 事件可能在祖先元素与子元素之间闪烁触发，这时可以使用 mouseleave() 来替代 mouseout() 来解决。
五、总结

mouseout() 是 jQuery 中的一种常用事件函数，通过它可以实现鼠标移开元素时的交互效果。记得要同时使用 mouseover()，同时也要注意事件可能在祖先元素与子元素之间闪烁触发的问题。