演示就看本站页脚的 关注我们 按钮
很多地方都可以用到个代码，鼠标移动到某个区域，在指定的位置展示一张图片，场景很多，例如关注公众号二维码，小图变高清大图等等
[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]
评论后查看内容
很6