前言
问题
如何使用CSS制作一个鼠标移出显示的弹框,一般用于打赏时显示二维码。
准备
在项目中,使用Bootstrap4(官方文档:Bootstrap4文档)和Font Awesome(图标库:搜索图标)协助开发。
开始实现
首先使用Bootstrap和FontAwesome写一个图标按钮:
<div class="text-center my-3" id="give-money">
<button class="btn btn-sm btn-outline-secondary mt-3 my-fs-12" style="position:relative">
打赏<i class="fa fa-wechat ml-1"></i>
</button>
</div>
效果如下:
然后我们需要将图像放在button内部,通过绝对定位实现位置的固定:
<div class="text-center my-3" id="give-money">
<button class="btn btn-sm btn-outline-secondary mt-3 my-fs-12" style="position:relative">
打赏<i class="fa fa-wechat ml-1"></i>
<div class="p-1 bg-white border rounded my-money-wechat">
<img src="../static/images/example.jpg" alt="微信扫码付款" width="128">
</div>
</button>
</div>
设置图像的CSS样式,一开始设为不显示,使用绝对定位,对于响应式页面而言,Y方向的距离可以根据按钮的大小进行适当调整(我这里将top调整为-140px),right属性可以使用CSS的calc函数进行计算,由于二维码的大小一般是固定的,我这里是128px,居中的计算方法为50%-imagewidth/2.
#give-money .my-money-wechat{
display: none;
position: absolute;
top: -140px;
right: calc(50% - 64px);
}
最后为按钮添加hover伪类样式,鼠标移入显示图像(通过:hover结合子选择器就可以完成鼠标移入按钮时对其他元素(比如这里的图像)进行显示和隐藏或者其他的操作了):
#give-money button:hover .my-money-wechat{
display: block;
}
最后的效果如下:
本次分享到这里就结束了,感谢! 于 2020-03-23 南通