jQuery实现鼠标悬浮图片遮罩效果

Web前端开发 / 5145 次阅读

完整代码： 

<!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>