使用CSS制作一个简单的hover弹出提示框

3,856 阅读2分钟

前言

问题

如何使用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 南通