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

admin

发表文章数:3177

完整代码:

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

未经允许不得转载:作者:admin, 转载或复制请以 超链接形式 并注明出处 夜河资源网
原文地址:《jQuery实现鼠标悬浮图片遮罩效果》 发布于2019-04-19

分享到:
赞(0) 打赏

评论 抢沙发

2 + 8 =


撰写不易~如果您觉得文章对您有帮助的话可以打赏我哦~谢谢亲亲~

支付宝扫一扫打赏

微信扫一扫打赏

外服网游加速器破解版
包含腾讯网游加速器、海豚网游加速器等八款知名加速器,可加速外服游戏,永久包售后包更新,不定时添加新款破解版加速器!
切换注册

登录

忘记密码 ?

切换登录

注册