图片高亮效果（鼠标移动到图片上当前图片高亮其他图片变暗）

最新推荐文章于 2022-08-22 10:08:59 发布

置顶聆听HJ

最新推荐文章于 2022-08-22 10:08:59 发布

阅读量1.6k

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_41542329/article/details/103069385

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

siblings() ：获得匹配集合中每个元素的同胞。（相当于获取当前元素的兄弟元素，注意：不包含他自己）

find（）：find() 方法获得当前元素集合中每个元素的后代。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	ul{
		list-style:none;
	}

	*{
		margin: 0;
		padding: 0;
	}
	.wrap{
		margin: 220px auto 0;
		width:630px;
		height:394px;
		padding: 10px 0, 0, 10px;
		background: #000;
		overflow: hidden;
		border: 1px solid #fff;
	}
	.wrap li{
		float: left;
		margin: 0 10px 10px 0;		
	}
	.wrap img{
		display: block;
		border: 0;
		width:200px;
		height:190px;
	}
</style>
<script type="text/javascript" src="/3DT/js/jquery-2.1.1.js"></script>
<script type="text/javascript">
	$(function(){
		var $li=$(".wrap>ul>li");
		$li.mouseenter(function(){
			$(this).css("opacity","1").siblings().css("opacity","0.4");
			
		}); 
		$(".wrap").mouseleave(function(){
			$(this).find("li").css("opacity","1");	
		});
	});
	
</script>
</head>
<body>
	<div class="wrap">
		<ul>
			<li><a href=""><img alt=""  src="/3DT/img/jb.png"></a></li>
			<li><a href=""><img alt="" src="/3DT/img/jb.png"></a></li>
			<li><a href=""><img alt="" src="/3DT/img/jb.png"></a></li>
			<li><a href=""><img alt="" src="/3DT/img/jb.png"></a></li>
			<li><a href=""><img alt="" src="/3DT/img/jb.png"></a></li>
			<li><a href=""><img alt="" src="/3DT/img/jb.png"></a></li>
		</ul>
	</div>
</body>
</html>

效果图：

鼠标移动到图片上：

聆听HJ

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
图片高亮效果（鼠标移动到图片上当前图片高亮其他图片变暗）

siblings() ：获得匹配集合中每个元素的同胞。（相当于获取当前元素的兄弟元素，注意：不包含他自己）find（）：find() 方法获得当前元素集合中每个元素的后代。<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE...
复制链接

扫一扫