<!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{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=" 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=" 100%;height: 50px;background: yellow"></div> </body> </html>
效果图：
