代码示例
HTML
1 2 3 4 5 6
|
<div class="bottom-btn"> <div class="qrcode-box"> <img class="qrcode-img" src="../assets/images/a-10.png" alt=""> <div class="text">手机扫码下载安装</div> </div> </div>
|
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
|
.bottom-btn { width: 232px; height: 57px; background-image: url("../assets/images/a-6.png"); background-size: 100% 100%; cursor: pointer; &:hover .qrcode-box { display: block; } .qrcode-box { width: 234px; height: 261px; margin-top: 40px; background-image: url("../assets/images/a-9.png"); background-size: 100% 100%; text-align: center; display: none; .qrcode-img { width: 120px; height: 120px; border-radius: 4px; margin: 58px auto 5px; } .text { color: #1A64FF; font-size: 14px; } } }
|
添加动画
按如下代码添加 CSS3 animation 动画,
推荐写法
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
|
.bottom-btn { &:hover .qrcode-box { display: block; animation: fade-in 0.5s linear forwards; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .qrcode-box { display: none; } }
|
以下代码是参考资料中的写法,会使得 bottom-btn 元素变得较大,鼠标滑过二维码隐藏时的区域也会使二维码显现,不符合逻辑,
瑕疵示范
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
|
.bottom-btn { &:hover .qrcode-box { opacity: 1; transform: translateY(0); } .qrcode-box { opacity: 0; transition: all 0.4s; transform: translateY(50%); } }
|
如果按钮、二维码有一个相同的父元素,.father:hover .qrcode-box { display: block; } 就可以实现类似的效果了。
参考资料:
css鼠标悬浮控制元素隐藏与显示