jQuery唯品会鼠标悬停弹出商品代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery唯品会鼠标悬停弹出商品代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery唯品会鼠标悬停弹出商品代码</title>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div id="wrap">
	<a href="" class = "a1"></a>
		<a href="" class = "a2">
			<img src="img/50043343.png">
			<p class="p1">摩登浪漫 独具个性</p>
			<p class="p2">跨专场满499减80, 上部封顶</p>
		</a>
	<div class = "divA">
		<div  class = "divB">
			<ul>
				<li><a href="">
						<img src="img/2.jpg" alt="" />
						<p >¥168</p>
				</a></li>
				<li>	<a href=""><img src="img/3.jpg" alt="" />
					<p >¥178</p>
				</a></li>
				<li>	<a href=""><img src="img/4.jpg" alt="" />
					<p >¥228</p>
				</a></li>
			</ul>
			<div class = "divC">
				<a href="" class = "a3">
					<img src="img/50043343.png">
				</a>
				<a href="" class = "a4">
					<img src="img/心.png" alt="" />
					<span>收藏品牌</span>
				</a>
				<a href="" class = "a5">进入专场</a>
			</div>
		</div>
	</div>
</div>
<script src="jquery/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
			$('#wrap').mouseenter(function(){
//				$('.a1').css('background','rgba(245,245,245,0.8)');
	$('.a1').css('-webkit-filter','blur(3px)');
		$('.a2').fadeOut();
		$('.divA').fadeIn();
	})
	$('#wrap').mouseleave(function(){
		$('.a1').css('-webkit-filter','blur()');
		$('.divA').fadeOut();
		$('.a2').fadeIn();
	})
</script>
</body>
</html>

CSS代码(demo.css):

*{margin:0;padding:0;}
a{text-decoration:none;}
ul li{list-style:none;}
#wrap{width:570px;height:350px;margin:100px auto;/*background:url(img/1.jpg);*/
position:relative;}
#wrap .a1{display:inline-block;width:100%;height:100%;background:url(img/1.jpg);}
#wrap .a2{display:inline-block;width:320px;height:100px;position:absolute;top:230px;left:122px;background:rgba(255,255,255,0.9);border-radius:4px;text-align:center;padding-top:5px;}
#wrap .a2{color:black;}
#wrap .a2 .p1{margin-top:5px;font-size:15px;font-weight:800;}
#wrap .a2 .p2{margin-top:5px;font-size:12px;color:#333;}
/*内部隐藏的div*/
#wrap .divA{display:none;position:absolute;top:25px;left:25px;width:520px;height:300px;background:rgba(255,255,255,1);border-radius:10px;/*border:1px solid;*/
}
#wrap .divA .divB{width:520px;height:219px;border-bottom:1px dotted;}
ul li img{width:140px;height:177px;}
ul{width:100%;height:207px;overflow:hidden;display:flex;justify-content:space-around;}
ul li{width:140px;height:207px;float:left;}
ul li:hover img{opacity:0.8;}
ul li a p{font:12px/1.5 tahoma,arial,Hiragino Sans GB,WenQuanYi Micro Hei,\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;text-align:center;color:black;font-weight:800;font-size:14px;}
.divA .divB .divC{width:100%;height:70px;margin-top:20px;}
.divA .divB .a3,.divA .divB .a4,.divA .divB .a5{float:left;display:inline-block;}
.divA .divB .a3{width:100px;height:50px;margin:10px 20px 0 34px;line-height:70px;}
.divA .divB .a4{color:darkgray;margin:25px 20px 0 34px;border-radius:10px;width:85px;height:22px;line-height:22px;border:1px solid;}
.divA .divB .a4:hover{color:white;background:rgb(241,1,128);}
.divA .divB .a4>img{vertical-align:middle;margin-left:7px;}
.divA .divB .a4 span{font-size:12px;}
.divA .divB .a5{color:black;font-size:14px;float:right;margin-right:10px;margin-top:22px;text-align:center;line-height:26px;width:138px;height:26px;border:1px solid;border-radius:8px;}
.divA .divB .a5:hover{color:white;background:black;}

附件:下载该文件资源,减少时间成本(增值服务)