试写了一个用jquery 和css实现的图片遮罩 - 黑马程序员技术交流社区

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$(".aa").hover(function(){
$(this).children("div").fadeIn("slow");
},function(){
$(this).children("div").fadeOut("slow");
})
})
</script>
<title>无标题文档</title>
<style>
.aa:hover{display:block;}
</style>
</head>
<body>
<div style="width:950px;height:463px;outline:1px dashed #666;margin:0 auto;">
<div class="aa" style="width:228px;height:463px;float:left;position:relative;">
<img src="T1QiSDXmNAXXXXXXXX.jpg" />
<div style="width:100%;height:100%;top:0;left:0;background:rgba(96,96,96,0.5);position:absolute; display:none;"></div>
</div>
<div style="float:left;width:700px;">
<div style="width:auto;">
<div class="aa" style="float:left;position:relative;" ><img src="T1L5ODXdVBXXXXXXXX.jpg" /><div style="width:100%;height:100%;top:0;left:0;background:rgba(96,96,96,0.5);position:absolute;display:none;"></div></div>
<div class="aa" style="float:left;position:relative;"><img src="T1lP1DXgdtXXXXXXXX.jpg" /><div style="width:100%;height:100%;top:0;left:0;background:rgba(96,96,96,0.5);position:absolute;display:none;"></div></div>
<p style="margin:0;padding:0;clear:both;"></p>
</div>
<div style="width:auto;">
<div class="aa" style="float:left;position:relative;"><img src="T1L5ODXdVBXXXXXXXX.jpg" /><div style="width:100%;height:100%;top:0;left:0;background:rgba(96,96,96,0.5);position:absolute;display:none;"></div></div>
<div class="aa" style="float:left;position:relative;"><img src="T1lP1DXgdtXXXXXXXX.jpg" /><div style="width:100%;height:100%;top:0;left:0;background:rgba(96,96,96,0.5);position:absolute;display:none;"></div></div>
<p style="margin:0;padding:0;clear:both;"></p>
</div>
</div>
<p style="margin:0;padding:0;clear:both;"></p>
</div>
</body>
</html>

复制代码