Jquery：解决鼠标移入移出多次触发的问题

最新推荐文章于 2024-05-30 15:25:18 发布

上网的虫不叫网虫

最新推荐文章于 2024-05-30 15:25:18 发布

阅读量3.5k

点赞数 2

分类专栏： CSS 文章标签： jquery html5 css

本文链接：https://blog.csdn.net/qq_42961150/article/details/120517295

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jq的鼠标移入移除事件：

mouseover()鼠标移入（移入子元素也触发）

mouseout()鼠标移出（离开子元素也触发）

mouseenter()鼠标移入（移入子元素不触发）

mouseleave()鼠标移出（离开子元素不触发）

hover()鼠标移入移出（mouseenter与mouseleave的缩写）

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标移入移除</title>
		<style type="text/css">
			.parent {
				width: 200px;
				height: 100px;
				margin: 100px auto;
				padding: 20px 0;
				background-color: pink;
				cursor: pointer;
			}
			.child {
				width: 80px;
				height: 20px;
				margin: 0 auto;
				background-color: yellow;
				text-align: center;
			}
			.drop {
				display: none;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 300px;
				height: 200px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child">我是子元素</div>
			<div class="drop">我是鼠标移入显示的内容</div>
		</div>
		<script type="text/javascript" src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript">
			// mouseover 进入子元素也触发
			// $('.parent').on('mouseover',function(){
			// 	$(this).parent().find('.drop').fadeIn();
			// })
			// $('.parent').on('mouseout',function(){
			// 	$(this).parent().find('.drop').fadeOut();
			// })
			// mouseover 进入子元素不触发
			// $('.parent').on('mouseenter',function(){
			// 	$(this).parent().find('.drop').fadeIn();
			// })
			// $('.parent').on('mouseleave',function(){
			// 	$(this).parent().find('.drop').fadeOut();
			// })
			$('.parent').hover(function(){
				$(this).parent().find('.drop').stop(false, true).fadeIn();
			},function(){
				$(this).parent().find('.drop').stop(false, true).fadeOut();
			})
		</script>
	</body>
</html>

分析：

可以看出我的代码中使用了stop()，如果不使用效果则是移入移出多次，就会不停的显示显示隐藏，stop的作用就是结束当前动画。

stop的在JQ中的使用场景：

stop();//停止当前动画，继续下一个动画

stop(true);//清除元素的所有动画

stop(false, true);//让当前动画直接到达末状态，继续下一个动画

stop(true, true);//清除元素的所有动画，让当前动画直接到达末状态

上网的虫不叫网虫

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Jquery：解决鼠标移入移出多次触发的问题

jq的鼠标移入移除事件：mouseover()鼠标移入（移入子元素也触发）mouseout()鼠标移出（离开子元素也触发）mouseenter()鼠标移入（移入子元素不触发）mouseleave()鼠标移出（离开子元素不触发）hover()鼠标移入移出（mouseenter与mouseleave的缩写）示例代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <
复制链接

扫一扫