33jQuery的移入移除事件

最新推荐文章于 2024-04-07 10:29:49 发布

天生我材必有用_吴用

最新推荐文章于 2024-04-07 10:29:49 发布

阅读量214

点赞数 1

分类专栏： jQuery 文章标签： 33jQuery的移入移除事件

本文链接：https://blog.csdn.net/qq_42696432/article/details/102811787

版权

jQuery 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

下面将介绍三种移入移出的事件

第一种

使用mouseover/mouseout移入移出
但是优缺点的，当点击子元素的时候，父元素也会触发移入移出事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>移入移出事件</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.father{
				width: 200px;
				height: 200px;
				background: red;
			}
			.son{
				width: 100px;
				height: 100px;
				background:blue;
			}
		</style>
		<script src="js/Jquery.js"></script>
		<script type="text/javascript">
			$(function(){				
					$(".father").mouseover(function(){
						console.log("father被移入了");
					});
					$(".father").mouseout(function(){
						console.log("father被移出了");
					});
			});
		</script>
	</head>
		<div class="father">
			<div class="son"></div>
		</div>
	<body>
	</body>
</html>

第二种

mouseenter/mouseleave事件，子元素移入移出不会触发父元素的事件
(推荐使用)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>移入移出事件</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.father{
				width: 200px;
				height: 200px;
				background: red;
			}
			.son{
				width: 100px;
				height: 100px;
				background:blue;
			}
		</style>
		<script src="js/Jquery.js"></script>
		<script type="text/javascript">
			$(function(){
				  $(".father").mouseenter(function(){
					console.log("father被移入了");
				  });
				  $(".father").mouseleave(function(){
					console.log("father被移出了");
				});
			});
		</script>
	</head>
		<div class="father">
			<div class="son"></div>
		</div>
	<body>
	</body>
</html>

第三种(也是经常使用)

$(".father").hover(function(){},function(){});
注意：这个不会有冗余的移入移出，第一个function代表着移入
第二个function代表着移出，如果只写一个的话代表着移入和移出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>移入移出事件</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.father{
				width: 200px;
				height: 200px;
				background: red;
			}
			.son{
				width: 100px;
				height: 100px;
				background:blue;
			}
		</style>
		<script src="js/Jquery.js"></script>
		<script type="text/javascript">
			$(function(){
				$(".father").hover(function(){
					console.log("father被移入了");
				},function(){
					console.log("father被移出了");
				});
			});
		</script>
	</head>
		<div class="father">
			<div class="son"></div>
		</div>
	<body>
	</body>
</html>

天生我材必有用_吴用

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
33jQuery的移入移除事件

下面将介绍三种移入移出的事件第一种使用mouseover/mouseout移入移出但是优缺点的，当点击子元素的时候，父元素也会触发移入移出事件<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>移入移出事件</title> &lt...
复制链接

扫一扫