04jquery事件_合成事件hover()使用

最新推荐文章于 2021-05-29 11:20:37 发布

ginger_mr

最新推荐文章于 2021-05-29 11:20:37 发布

阅读量233

点赞数

分类专栏： Callback

本文链接：https://blog.csdn.net/qq_40332952/article/details/104449159

版权

Callback 专栏收录该内容

51 篇文章 2 订阅

订阅专栏

04jquery事件_合成事件hover(事件切换hover(鼠标移上来, 鼠标移下去))

方法解析

代码
hover(over, out)
$(“td”).hover(
function () {
$(this).addClass(“hover”);
},
function () {
$(this).removeClass(“hover”);
}
);
概述
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。

代码演示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>合成事件hover</title>
		<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
		<script src="../js/jquery-1.11.0.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function() {
				$(".head").hover(function() {
					$(this).next().show();
				}, function() {
					$(this).next().hide();
				})
			})
		</script>
	</head>

	<body>
		<div id="panel">
			<h5 class="head">什么是jQuery?</h5>
			<div class="content">
				jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
			</div>
		</div>
	</body>
</html>

页面展示
原始页面

在这里插入图片描述
鼠标移动到什么是jQuery

ginger_mr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
04jquery事件_合成事件hover()使用

jquery事件_合成事件代码演示<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> &...
复制链接

扫一扫

专栏目录