📌  相关文章
📜  jQuery |悬停()与示例(1)

📅  最后修改于: 2023-12-03 15:32:12.706000             🧑  作者: Mango

jQuery | 悬停()与示例

简介

悬停()是jQuery中的一个方法，用于在鼠标悬停在指定元素上时执行某个函数。该方法常用于添加交互效果，可以实现悬停提示、菜单展开等功能。通常，可以将悬停()方法与离开()方法配合使用，来控制鼠标在元素上的行为。

语法
$(selector).hover(inFunction, outFunction);

参数说明：

  • selector - 必需，用于指定需要添加悬停事件的HTML元素。
  • inFunction - 必需，当鼠标悬停在该元素上时要执行的函数。
  • outFunction - 可选，当鼠标移开该元素时要执行的函数。
示例

以下是一个简单的示例，用于在鼠标悬停在某个元素上时显示一个提示框：

<!DOCTYPE html>
<html>
<head>
	<title>示例：使用悬停方法显示提示</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<style>
		.tooltip {
			display: none;
			position: absolute;
			background-color: #fff;
			border: 1px solid #ccc;
			padding: 5px;
			z-index: 9999;
		}
	</style>
</head>
<body>
	<p>鼠标悬停在这里查看提示</p>
	<div class="tooltip">这是一个提示框。</div>
	<script>
		$(document).ready(function(){
			$("p").hover(function(){
				$(".tooltip").css({
					"top": $(this).position().top + $(this).outerHeight() + 10,
					"left": $(this).position().left
				}).fadeIn("fast");
			},function(){
				$(".tooltip").fadeOut("fast");
			});
		});
	</script>
</body>
</html>

代码解释：

  • $("p")选中了页面中的一个<p>元素。
  • 在hover()函数中，第一个函数用于当鼠标悬停在元素上时执行的操作，即将提示框设置为该元素的下方并显示，使用jQuery中的fadeIn()方法来添加动态效果。
  • 第二个函数用于当鼠标移开该元素时执行的操作，即将提示框隐藏，使用jQuery中的fadeOut()方法来添加动态效果。

效果如下：

jquery-hover-demo

总结

悬停()方法是一个非常有用的jQuery方法，可以实现很多交互效果。了解了该方法的使用，可以让我们更好地掌控页面的行为。