数据结构
网络
关系数据库管理系统
操作系统
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.com/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 次查看
