本文为大家详细介绍下使用jQuery实现鼠标滑过遮罩高亮显示效果
想必这种效果在网上大家都有见到过
下面是具体的示例
感兴趣的各位可以参考下哈
希望对大家有所帮助
复制代码 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http
equiv="Content
Type" content="text/html; charset=utf
" />
<title>鼠标滑过遮罩高亮效果</title>
<style>
*{padding:
;margin:
;}
ul
li{list
style:none;}
picshow{float:left;padding:
px
;width:
px;position:relative;}
picshow li{float:left;height:
px;width:
px;background:
;}
picshow li img{height:
px;width:
px;}
picshow li a{display:block;}
</style>
<script type="text/javascript" src="
<script type="text/javascript">
$(function() {
var conAry = $("[name=h_light]");
conAry
each(function(){
var $this = $(this);
var els = $("a"
$this);
els
each(function(){
var el = $(this);
el
mouseover(function() {
els
css({ "opacity":
});
el
animate({ "opacity":
});
});
});
$this
mouseout(function() {
els
css("opacity"
);
});
});
});
</script>
</head>
<body>
<ul class="picshow" name="h_light">
<li><a href="://pic
cn/upload/
/
jpg" ></a></li>
<li><a href="://pic
cn/upload/
/
jpg" ></a></li>
<li><a href="://pic
cn/upload/
/
jpg" ></a></li>
<li><a href="://pic
cn/upload/
/
jpg" ></a></li>
<li><a href="://pic
cn/upload/
/
jpg" ></a></li>
<li><a href="://pic
cn/upload/
/
jpg" ></a></li>
<li><a href="://pic
cn/upload/
/
jpg" ></a></li>
<li><a href="://pic
cn/upload/
/
jpg" ></a></li>
</ul>
</body>
</html>
效果图如下
