jQuery hover()和mouseover()的區別用法及代碼示例

在了解兩者之間的區別之前hover() 和mouseover()jQuery 的方法，我們簡單看一下這兩個方法。

hover()方法：當我們將鼠標光標懸停在任何元素上時，會發生兩個事件，即mouseenter()r和mouseleave().

mouseenter: 當我們將光標移到元素上時。
mouseleave: 當我們從元素上移除光標時。

hover()方法綁定 mouseenter 和 mouseleave 事件的處理程序。本質上，使用 hover() 方法，我們將指定當光標進入該元素時要執行的操作，以及當光標離開該元素時要執行的操作。

用法:

$( selector ).hover( handlerIn, handlerOut )

Parameters: 它接受兩個函數，即 handlerIn 和 handlerOut。

handlerIn: 當光標進入元素時將執行該函數。
handlerOut:(可選)當光標離開元素時執行此函數。

當我們隻提供一個函數作為 hover() 方法的參數時，那麽該函數將針對 mouseenter 和 mouseleave 事件執行。

例子：在這個例子中，我們將看到如何使用hover()方法。我們有一個單詞，每當光標進入該元素時，我們都會嘗試更改它的顏色。當光標離開該元素時，顏色會變返回。

HTML


<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- jQuery library -->
    <script src= 
"https://code.jquery.com/jquery-git.js"> 
    </script> 
</head> 
  
<body> 
    <h2>GeeksforGeeks</h2> 
  
    <script> 
  
        // Calling hover() method  
        // on h1 tag 
        $("h2").hover( 
  
            // mouse-enter event 
            function () { 
  
                // changing the color 
                $("h2").css('color', 'green') 
            }, 
  
            // mouse-leave event 
            function () { 
  
                // Putting the color back 
                $("h2").css('color', 'black') 
            }) 
    </script> 
</body> 
  
</html>

輸出：

懸停法

Mouseover()方法：當鼠標懸停事件發生時，將執行mouseover()方法。當光標進入元素時，會發生 mouseover 事件，然後將執行該元素的 mouseover() 方法。我們還可以附加一個在調用 mouseover() 方法時執行的函數。

用法:

$(selector).mouseover(handler)

參數：(可選)它接受一個函數，當mouseover()方法被調用。

Example:在此示例中，我們將了解如何使用mouseover()方法。

HTML


<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- jQuery library -->
    <script src= 
    "https://code.jquery.com/jquery-git.js"> 
    </script> 
</head> 
  
<body> 
    <h2>GeeksforGeeks</h2> 
  
    <script> 
        $("h2").mouseover( 
            function () { 
                // changing the color 
                $("h2").css('color', 'red') 
            }) 
    </script> 
</body> 
  
</html>

輸出：

hover()和mouseover()方法的區別：

hover()	mouseover()
將兩個處理程序綁定到匹配的元素，當光標進入和離開元素時執行。	將一個處理程序綁定到匹配的元素，當光標進入元素時執行。
它最多接受兩個函數作為參數，一個用於鼠標輸入和一個用於鼠標離開事件。	它最多接受一個函數作為參數，當鼠標移到事件發生。
在裏麵hover()方法，當光標進入該元素或其子元素時，處理程序輸入函數被調用一次，當光標離開元素時，處理程序輸出函數被調用一次。	在裏麵mouseover()方法，我t 的工作方式與hover()方法，但對於嵌套元素，當光標進入附加了 mouseover 事件的外部部分時，會調用 mouseover() 方法，但當光標進入內部部分時，會再次調用 mouseover() 方法。
handlerIn 和 handlerOut 函數將在每個元素每次進入和退出時調用一次	對於嵌套元素，此方法可以多次觸發。

相關用法

注：本文由純淨天空篩選整理自hritikrommie大神的英文原創作品 Difference between hover() and mouseover() methods in jQuery。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。