鼠标悬停微信图标显示二维码

时间：2024-02-19 21:59:13
<!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>

效果图：

相关文章