在 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"

請參閱此處的程式碼演示。