极客教程jQuery中hover()和mouseover()方法的区别
在学习jQuery的hover()和mouseover()方法的区别之前，让我们简单地看看这两个方法。
hover()方法：当我们将鼠标光标悬停在任何元素上时，会发生两个事件，即mouseenter和mouseleave。
- mouseenter。当我们把光标移到该元素上时。
- mouseleave。当我们把光标从元素上移开时。
hover()方法为mouseenter和mouseleave两个事件绑定了处理程序。基本上，通过hover()方法，我们将指定当光标进入该元素时要做什么，我们将指定当光标离开该元素时要做什么。
语法:
$( selector ).hover( handlerIn, handlerOut )
参数：它接受两个函数，即 handlerIn 和 handlerOut。
- handlerIn。当光标进入该元素时，该函数将被执行。
- handlerOut: (可选) 当光标离开元素时，这个函数被执行。
当我们只提供一个函数作为hover()方法的参数时，那么这个函数将对mouseenter和mouseleave事件都被执行。
例子：在这个例子中，我们将看到如何使用hover()方法。我们有一个词，我们将尝试在光标进入该元素时改变它的颜色。当光标离开该元素时，颜色会变回来。
<!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>
输出:
hover 方法
Mouseover()方法：当mouseover事件发生时，mouseover()方法将被执行。当光标进入元素时，mouseover事件发生，然后该元素的mouseover()方法将被执行。我们还可以附加一个函数，当mouseover()方法被调用时，该函数将被执行。
语法:
$(selector).mouseover(handler)
参数：（可选）它接受一个函数，当mouseover()方法被调用时将被执行。
例子：在这个例子中，我们将看到如何使用mouseover()方法。
<!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()方法中，当光标进入该元素或其子元素时，handlerIn函数被调用一次，当光标离开该元素时，handlerOut函数被调用一次。 | 在mouseover()方法中，其工作原理与hover()方法相同，但在嵌套元素的情况下，当光标进入附加mouseover事件的外部部分时，mouseover()方法被调用，但当光标进入内部部分时，mouseover()方法再次调用。 |
| handlerIn和handlerOut函数将在每个元素的进入和退出过程中被调用一次 | 这个方法在嵌套元素的情况下可以启动多次。 |