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

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

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

声明:本站所有文章,如无特殊说明或标注,均为爬虫抓取以及网友投稿,版权归原作者所有。
2 条回复 A文章作者 M管理员
  1. 请直接提问

    评论后查看内容

  2. 七七

    很6