鼠标移入图标显示二维码功能实现

最新推荐文章于 2024-05-22 10:39:46 发布

云隐雾匿

最新推荐文章于 2024-05-22 10:39:46 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_45684362/article/details/125032471

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、效果图

二、代码

<!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;} /*微信图标*/
        /*以上两个width和height数值需保持一致，可根据需要调整尺寸，定位方式，font-size设置字体大小*/
        
        .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;}
    </style>
</head>
<body>
<div style="width: 100%;height: 100px;"></div><!--界限1，方便展示效果-->

<!-- 代码部分begin -->
    <div class="weixin" onmouseover="this.className = 'weixin on';" onmouseout="this.className = 'weixin';">
        <a href="javascript:;">
            <img src="./er.png" alt=""/><!--待添加图片1（图标）-->
        </a>
        <div class="weixin_nr">
            <div class="arrow"></div> <!--箭头样式-->
            <img src="./support.png" width="100" height="100" /><!--待添加图片2（二维码）-->
            支持一下
        </div>
    </div>
<!--代码部分end-->

<div style="width: 100%;height: 100px;"></div><!--界限2-->

</body>
</html>