鼠标经过在指定的位置显示一张图片

发布时间：2023-07-02 文章分类：WEB开发投稿人：樱花字号：默认 | 大 | 超大打印

演示就看本站页脚的关注我们按钮

很多地方都可以用到个代码，鼠标移动到某个区域，在指定的位置展示一张图片，场景很多，例如关注公众号二维码，小图变高清大图等等
[ri-reply-hide]

<!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:;">
           <i class="fab fa-weixin me-1"></i> 关注我们 <!--待添加图片1（文字、图标）都可以根据实际进行跳转-->
        </a>
        <div class="weixin_nr">
            <div class="arrow"></div> <!--箭头样式-->
            <img src="https://www.yuucn.com/fwh.jpg" width="100" height="100" /><!--可修改样式里面的图片大小（二维码）-->
            支持一下
        </div>
    </div>
<!--代码部分end-->
 
<div style="width: 100%;height: 100px;"></div><!--界限2-->
 
</body>
</html>

[/ri-reply-hide]

标签位置, 微信, 添加