在 jQuery 中使用悬停

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

在 jQuery 中使用 .hover()

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

语法：

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

参数：

1. handlerInFn：当鼠标指针进入元素时，需要调用/执行该函数。
2. handlerOutFn：当鼠标指针离开元素时，需要调用/执行该函数。
3. 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"

请参阅此处的代码演示。