jQ实现鼠标移入移出事件

最新推荐文章于 2025-07-17 18:35:20 发布

尔嵘

最新推荐文章于 2025-07-17 18:35:20 发布

阅读量5k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： jQuery JavaScript 文章标签： css html elementui

未经csdn博主（前端-尔嵘）允许不得转载，转载请注明转载路径及说明！

本文链接：https://blog.csdn.net/XU441520/article/details/103699893

JavaScript 同时被 2 个专栏收录

105 篇文章

订阅专栏

jQuery

15 篇文章

订阅专栏

当有多个相同的label标签时，当我鼠标移入标签时显示的突出显示效果。

效果：

HTML：

<li style="overflow-y: scroll;overflow-x: scroll;"><label style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
							 class="el">模板一</label><label style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
							 class="el">模板二</label><label style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
							 class="el">模板三</label><label style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
							 class="el">模板四</label><label style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
							 class="el">模板五</label><label style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
							 class="el">模板六</label><label style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
							 class="el">模板七</label></li>

JS：

引入jQ:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

var els= document.getElementsByClassName("el");
$(".el").each(function(index) {
	//移入事件
	$(this).mouseenter(function(obj) {
		els[index].style.backgroundColor = "#DBDBDB";
	});

})
$(".el").each(function(index){
	//移入事件
	$(this).mouseleave(function(obj){
		els[index].style.backgroundColor = "#FFFFFF";
	});
})

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>如果您是需要雨伞可以去淘宝搜索：华诚荣邦百货</title>
	</head>
	<body>
		<div>
			<li style="overflow-y: scroll;overflow-x: scroll;"><label
					style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
					class="el">模板一</label><label
					style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
					class="el">模板二</label><label
					style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
					class="el">模板三</label><label
					style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
					class="el">模板四</label><label
					style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
					class="el">模板五</label><label
					style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
					class="el">模板六</label><label
					style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
					class="el">模板七</label></li>
		</div>
	</body>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
		var els = document.getElementsByClassName("el");
		$(".el").each(function(index) {
			//移入事件
			$(this).mouseenter(function(obj) {
				els[index].style.backgroundColor = "#DBDBDB";
			});

		})
		$(".el").each(function(index) {
			//移入事件
			$(this).mouseleave(function(obj) {
				els[index].style.backgroundColor = "#FFFFFF";
			});
		})
	</script>
</html>