Jquery：解决鼠标移入移出多次触发的问题_html5中,mouseenter移入效果时,会一直触发

作者：AllinToyou | 2024-05-02 21:35:50

踩

html5中,mouseenter移入效果时,会一直触发

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

分析：

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

stop的在JQ中的使用场景：

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

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

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/526228