zoukankan      html  css  js  c++  java
  • 鼠标悬停微信图标显示二维码

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

    效果图:

  • 相关阅读:
    Java虚拟机------JVM内存区域
    Java虚拟机------垃圾收集器
    Java虚拟机--------JVM常见参数
    Kafka和的安装与配置
    Kafka介绍与消息队列
    Kafka命令操作
    Kafka深度解析
    Flume架构
    四十三、NPM报错ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE
    四十二、在线预览pdf文件
  • 原文地址:https://www.cnblogs.com/heyiming/p/6567173.html
Copyright © 2011-2022 走看看