鼠标移到微信图标出现微信二维码
代码1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>鼠标悬停微信图标显示二维码</title>
<style>
*{ margin:0; padding:0; list-style:none}
body{ background:#E6F0F3;}
.weixin{ width:30px; height:30px; margin:100px auto;position:relative; font-size:12px; text-align:center;}
/*.weixin a img{width:30px; height:30px; display:block; position:absolute; left:0; top:0;background:url(http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_weixin.png) no-repeat center top; }*/
/*注释打开明暗效果替换 下面替掉*/
.weixin a img{width:30px; height:30px;} /*微信图标*/
.weixin .weixin_nr{width:100px; height:120px; padding:10px; background:#fff; text-align:center; position:absolute; left:-45px; top:-152px; display:none;}
.weixin .weixin_nr img{ margin-bottom:5px;}
.weixin .weixin_nr .arrow{ width:0; height:0; border-top:10px solid #fff;border-left:10px solid transparent;border-right:10px solid transparent; position:absolute; left:50px; top:140px;}
.weixin.on .weixin_nr{ display:block;}
/*.weixin.on a{ background:url(http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_weixin.png) no-repeat left bottom;} 注释打开明暗效果替换*/
</style>
</head>
<body>
<div style="width: 100%;height: 50px;background: blue"></div>
<!--代码部分begin-->
<div class="weixin" onmouseover="this.className = 'weixin on';" onmouseout="this.className = 'weixin';">
<a href="javascript:;">
<img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_weixin1.png" alt=""/>
</a>
<div class="weixin_nr">
<div class="arrow"></div>
<img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_suoshipai.jpg" width="100" height="100" />
关注官方微信
</div>
</div>
<!--代码部分end-->
<div style="width: 100%;height: 50px;background: yellow"></div>
</body>
</html>
转载请注明：首页 > 学习笔记 > 网站技能 ? 鼠标移到微信图标出现微信二维码
特别说明：
感谢您的支持，我会继续努力的!
扫码打赏，你说多少就多少
打开支付宝扫一扫，即可进行扫码打赏哦
资源分享不易，你的支持，将会是我继续前行的动力！！！
