仿京东右侧固定栏

最新推荐文章于 2026-04-17 02:15:14 发布

原创最新推荐文章于 2026-04-17 02:15:14 发布 · 2.7k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文介绍使用jQuery实现鼠标悬停效果的方法，通过为元素添加和移除样式类，展示和隐藏子元素，并对其后的同级元素进行样式操作。详细解析了jQuery选择器和事件处理函数的使用。

<script type="text/javascript" src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(".ss").hover(function(){
			//dfs是当前元素的下标
			var dfs = $(".ss").index(this)
			//当前元素添加样式的子级元素显示的之后的同辈元素添加样式
			$(".ss").eq(dfs).addClass("bei").children(".onetext").show().next(".item").addClass("bei");
		},function(){
			var dfs = $(".ss").index(this)
			//当前元素移除样式的子级元素隐藏的之后的同辈元素移除样式
			$(".ss").eq(dfs).removeClass("bei").children(".onetext").hide().next(".item").removeClass("bei");
		})
	</script>