資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究jQuery 中 hover() 和 mouseover() 方法的區別
JavaScript 庫“jQuery”被認為是最有效且輕量級的 JavaScript 庫。它基於內建方法，封裝了多行 JavaScript 程式碼來執行給定的功能。可以使用一行程式碼輕鬆呼叫這些方法。在執行必要操作的同時，它縮短了程式碼。當相關事件發生時，使用者可以使用一行程式碼來呼叫 **“hover()”** 和 **“mouseover()”** jQuery 方法來執行任務。
讓我們深入瞭解本文，以瞭解更多關於 jQuery 中 hover() 和 mouseover() 方法之間差異的資訊。在瞭解差異之前，讓我們快速瞭解一下 hover() 和 mouseover() 方法。
hover() 方法
為了處理滑鼠懸停事件，我們使用 jQuery 的 hover() 方法。當滑鼠游標經過選定的 HTML 元素時，會執行兩個操作。當滑鼠指標經過 HTML 元素時，它會生成滑鼠進入和滑鼠離開事件，並響應這兩個事件。這兩個事件由兩個不同的函式處理。
語法
以下是 hover() 方法的語法
$(selector).hover(Functionin, Functionout)
示例
讓我們看看下面的示例，我們將在此示例中實現 hover() 方法。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<style>
body {
font-family: verdana;
text-align: center;
background-color: #D5F5E3;
}
</style>
</head>
<body>
<h2>TUTORIALSPOINT</h2>
<script>
$("h2").hover(function() {
$("h2").css('color', '#DE3163')
}, function() {
$("h2").css('color', '#5B2C6F')
})
</script>
</body>
</html>
當我們執行上述指令碼時，它將生成一個包含網頁上文字的輸出。當用戶嘗試將滑鼠懸停在文字上時，事件被觸發並更改其顏色，當用戶將滑鼠從文字上移開時，事件被觸發並顯示顏色。
mouseover() 方法
jQuery 中的 mouseover() 方法用於觸發 mouseover 事件。當滑鼠指標位於選定元素上時，就會發生這種情況。
語法
以下是 mouseover() 方法的語法
$(selector).mouseover(func)
示例
考慮下面的示例，我們將在此示例中實現 mouseover() 方法。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
body {
width: 200px;
padding: 50px;
height: 50px;
border: 2px solid #DE3163;
font-family: verdana;
text-align: center;
}
</style>
</head>
<script>
$(document).ready(function() {
$("p").mouseover(function() {
$("p").css("background-color", "#D5F5E3");
});
});
</script>
<body>
<p>WELCOME.!</p>
</body>
</html>
執行上述指令碼後，它將生成一個輸出，該輸出包含一個類似盒子的形狀以及在網頁上顯示的文字。當用戶嘗試將滑鼠移動到文字上時，事件被觸發併為文字應用顏色。
hover() 和 mouseover() 方法的區別
讓我們深入瞭解 hover() 和 mouseover() 方法之間的區別 -
hover() |
mouseover() |
|---|---|
將兩個處理程式繫結到匹配的元素，以便在游標進入和退出元素時呼叫它們。 |
將一個處理程式繫結到匹配的元素，以便在游標進入元素時呼叫它。 |
它最多可以接受兩個引數，一個用於 mouseenter 事件，另一個用於 mouseleave 事件。 |
它只允許傳遞一個函式作為引數，並且該函式僅在發生 mouseover 事件時使用。 |
使用 hover() 方法時，當游標進入元素或其子元素之一時，handlerIn 函式被呼叫一次，當指標退出元素時，handlerOut 函式被呼叫一次。 |
與 hover() 方法類似，當游標進入附加了 mouseover 事件的元素的外側時，mouseover() 方法被呼叫。但是，當游標進入內側時，mouseover() 方法會被再次呼叫一次。 |
每個元素的進入和退出將觸發對 handlerIn 和 handlerOut 函式的單個呼叫。 |
在巢狀元素的情況下，此方法可能會執行多次。 |
226 次檢視
