在 jQuery 中使用悬停

JavaScript 2周前 26

在今天的文章中，我们将了解 jQuery 中的 .hover() 事件。

在 jQuery 中使用 `.hover()`

JQuery 的 .hover() 方法将一个或两个处理程序绑定到匹配因子，以便在鼠标光标进入和退出元素时同时完成。根据绑定器处理程序，.hover() 方法可以采用三种参数。

语法：

.hover( handlerInFn, handlerOutFn )
.hover( handlerInOutFn )

参数：

.hover() 方法绑定控制器以使鼠标移入和移出活动。当鼠标在细节内部时，你可以使用它来观察元素在给定时间的行为。

.hover() 技术，即使你传递一个函数，也会在鼠标输入和输出上运行该处理程序。我们应该在处理程序中使用 jQuery 的各种切换技术，或者根据 event.type 在处理程序中做出异常响应。

你可以在文档中找到有关 .hover() 方法的更多信息此处。

让我们通过以下示例来理解 .hover()：

HTML 代码：

<ul>
  <li>Windows</li>
  <li>Mac</li>
  <li>Linux</li>
</ul>

JavaScript 代码：

$( "li" ).hover(function() {
  console.log(this.textContent)
});

使用 ul 元素，我们在上面的示例中描述了一个操作系统列表。当你开始将鼠标悬停在列表上时，它将跟随悬停对元素的影响，然后执行相应的功能。

在上述实例中，当你开始将鼠标悬停在 Linux 上时，它将打印元素的文本值。

尝试在任何支持 jQuery 的浏览器中运行上面的代码片段。它将显示下面给出的结果：

输出：

"Linux"

请参阅此处的代码演示。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布，任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供，仅供学习和研究使用。如您对本站的相关版权有任何异议，或者认为侵犯了您的合法权益，请及时通知我们处理。