jQuery 的 hover() 与 mouseover() 方法详解
阅读：66
点赞：0
JavaScript 库 jQuery 被认为是最有效的轻量级 JavaScript 库之一。它基于内置的方法，将多行 JavaScript 代码封装成简洁的代码调用，极大地简化了操作。用户可以通过一行代码调用 hover() 和 mouseover() 方法来处理相关事件，执行各种操作。接下来，我们将详细介绍 jQuery 的 hover() 和 mouseover() 方法及其区别。
一. hover() 方法
1.1 方法简介
hover() 方法用于处理鼠标悬停事件。当鼠标光标经过指定的 HTML 元素时，会触发两个操作：鼠标进入事件和鼠标离开事件。该方法可以处理这两个事件，并允许分别指定处理这两个事件的函数。
1.2 语法
$(selector).hover(Functionin, Functionout)
-
Functionin：鼠标进入元素时调用的函数。 -
Functionout：鼠标离开元素时调用的函数。
1.3 示例
以下示例展示了如何使用 hover() 方法：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<style>
body {
font-family: verdana;
text-align: center;
background-color: #D5F5E3;
}
</style>
</head>
<body>
<p>TUTORIALSPOINT</p>
<script>
$("p").hover(function() {
$("p").css('color', '#DE3163'); // 鼠标进入时，将颜色改为 #DE3163
}, function() {
$("p").css('color', '#5B2C6F'); // 鼠标离开时，将颜色改为 #5B2C6F
});
</script>
</body>
</html>
解释：
-
当鼠标悬停在 <p>元素上时，文字颜色将变为#DE3163。 -
当鼠标离开 <p>元素时，文字颜色将变回#5B2C6F。
二. mouseover() 方法
2.1 方法简介
mouseover() 方法用于触发鼠标悬停事件。当鼠标指针悬停在选定元素上时，该事件会被触发。
2.2 语法
$(selector).mouseover(func)
-
func：当鼠标悬停在元素上时调用的函数。
2.3 示例
以下示例展示了如何使用 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"); // 鼠标悬停时，将背景颜色改为 #D5F5E3
});
});
</script>
<body>
<p>WELCOME.!</p>
</body>
</html>
解释：
-
当鼠标悬停在 <p>元素上时，背景颜色将变为#D5F5E3。
三. hover() 与 mouseover() 方法的区别
3.1 hover() 方法
-
绑定两个处理函数：当光标进入元素时调用一个函数，离开元素时调用另一个函数。 -
可以传入最多两个参数，一个用于 mouseenter事件，另一个用于mouseleave事件。 -
handlerIn函数在光标进入元素或其子元素时调用一次，handlerOut函数在光标离开元素时调用一次。 -
对于嵌套元素，每个元素的进入和退出会触发一次相应的处理函数。
3.2 mouseover() 方法
-
绑定一个处理函数：当光标进入元素时调用该函数。 -
仅允许一个函数作为参数，该函数在 mouseover事件发生时调用。 -
当光标进入元素的内部部分时， mouseover()方法会再次被调用。 -
对于嵌套元素， mouseover()方法可能会多次执行。
四.总结
hover() 方法适用于需要处理鼠标进入和离开两个事件的场景，而 mouseover() 方法则适用于仅需要处理鼠标进入事件的场景。选择合适的方法可以使代码更加简洁高效。