jQuery hover()的用法（附带实例）

在 jQuery 中提供了模拟用户的操作触发事件、模拟悬停事件和模拟鼠标连续单击事件 3 种模拟用户操作的方法。

模拟鼠标悬停事件通过 jQuery 提供的 hover() 方法实现。hover() 方法的语法格式如下：

hover(over, out)

over：用于指定当鼠标指针移入匹配元素时触发的函数；
out：用于指定当鼠标指针从匹配元素上移出时触发的函数。

hover() 方法在 jQuery 3.3 中已废弃，请使用 .on("mouseenter", handlerIn) 和 .on("mouseleave", handlerOut)。

当鼠标指针移入一个匹配元素时，会触发指定的第 1 个函数；当鼠标指针从这个元素上移出时，会触发指定的第 2 个函数。整个过程会伴随着对鼠标指针是否仍然处在特定元素中的检测。例如，检测鼠标指针是否仍然处在 <div> 元素中），如果是，则会继续保持“悬停”状态，而不触发移出事件。

【实例】隐藏超链接。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库：

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <body> 标记中添加一个 id 属性值为 button 的按钮。具体代码如下：

<input type="button" name="button" id="button" value="普通按钮"/>

3) 在引入 jQuery 库的代码下方编写 jQuery 代码，为 class 属性值为 main 的 <a> 元素添加 hover 事件。当鼠标指针移入该元素时触发第 1 个函数，当鼠标指针从该元素上移出时触发第 2 个函数。具体代码如下：

<script type="text/javascript">
$(document).ready(function() {
    $("a.main")
        .on("mouseenter", function() {          // 绑定鼠标指针移入超链接事件
            window.status = "https://c.biancheng.net";
            return true;                        // 设定状态栏文本
        })
        .on("mouseleave", function() {          // 绑定鼠标指针从超链接上移出事件
            window.status = "完成";
            return true;                        // 设定状态栏文本
        });
});
</script>

jQuery hover()的用法（附带实例）

相关文章