鼠标经过弹出二维码特效怎么做？

徐伟轩博主

2022-10-14 14:21

2 评论

217 阅读

309 字

10月14

上一篇文章我也提到了，受到网友启发，我觉得也确实有必要把一些知识点分享给大家，其实就也涵盖了互联网精神。
今天我分享一个在网站中经常可能使用到的鼠标经过特效。
与其说特效，那我们倒不如先从原理先入手。
要做鼠标经过，出现二维码的效果，那咱们其实可以简单点做，先把这个二维码隐藏，然后鼠标经过的时候，再出现呗。
【技术分析】
1、先隐藏元素
CSS里这样写 display: none;
2、然后鼠标经过，是不是代码要写成 :hover给它定义成
display: block;
【实例】

<div class="share">
  <a href="javascript:;"><img src="images/vx.svg">
    <div class="wx_b">
     <p><img src="../images/weixin.png"></p>
    </div>
   </a>           
</div>

CSS代码如下：

.share .wx_b{
        display: none;
}
.share p img {
    width: 100px;
}
.share  a{
    display: inline-block;
    position: relative;
    height: 30px;
    margin-top: -17px;
    top: 50%;
    margin-left: 10px;
}
.share a:hover div{
    display: block;
}

[分析一下]重点需要的代码
微信的图标vx.svg，是在share这个div里，被a标签包含。
微信二维码weixin.png图片是在wx_b这个div里，同样也是被a标签包含。
那么，其实我们就只需要搞定这两个CSS
.share .wx_b{
display: none;
}
也就是说wx_b这个div容器，一开始是隐藏的。
.share a:hover div{
display: block;
}
然后，鼠标经过a:hover了，就要让它显示出来。
不知道这样讲，大家是不是就容易明白了。