jQuery实现鼠标悬浮图片遮罩效果
完整代码：
<!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=gb2312" />
<title>资源共享neirong.org分享jQuery实现鼠标悬浮图片遮罩效果代码</title>
<style>
img{ border:0; }
div,p,img,ul,li,form,input,label,span,dl,dt,dd,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
ol,ul,li{list-style-type:none;}
.shang{ text-align:left; height:230px;}
.shang1{ width:270px; float:left; border:#ececec solid 1px;height:230px; position:relative }
.shang2{ width:270px; float:left ; border:#ececec solid 1px;height:230px; position:relative}
.shang3{ width:432px; float:left; border:#ececec solid 1px;height:230px; position:relative}
.ding{ height:100px; border-bottom:#999999 1px solid}
.xxx{ background:#000; width:270px; height:230px; position:absolute; left:0; top:0; filter:alpha(opacity=30);opacity:0.3;}
</style>
<script type="text/javascript" src="/images/jquery1.3.2.js"></script>
<script type="text/javascript">
$(function(){
$(".shang").children().hover(function(){
$(this).children().eq(1).hide();
},function(){
$(this).children().eq(1).show();
})
})
</script>
</head>
<body>
<div class="shang" >
<div class="shang1"><a href="/" target="_blank"><img src="/images/m01.jpg" width="270" height="230"></a><div class="xxx"></div></div>
<div class="shang2"><a href="/" target="_blank"><img src="/images/m03.jpg" width="270" height="230"></a><div class="xxx"></div></div></div>
</body>
</html> << 上一篇
下一篇 >>