徐伟轩博客-爱写歌的程序员思考和科普的日常自媒体

统计
登录
用户名
密码
/
注册
用户名
邮箱
输入密码
确认密码
TypechoJoeTheme

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

徐伟轩博主
2022-10-14 14:21
/
2 评论
/
138 阅读
/
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了,就要让它显示出来。
不知道这样讲,大家是不是就容易明白了。

赞(0)
赞赏
感谢您的支持,我们会继续努力哒!
版权:

徐伟轩博客-爱写歌的程序员思考和科普的日常自媒体

本文链接:

https://letus.top/archives/644.html(转载时需注明本文出处及文章链接)

如无特别注明,本站内容为原创。

如需转载或刊登,请联系我们获得授权。

评论 (2)
本篇文章评论功能已关闭

亲爱的朋友

一切伟大,源于勇敢的开始。

人生倒计时

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

标签云