CSS实现鼠标悬停弹出微信二维码

WordPress网站建设过程中,需要在网站上展示微信二维码,用于展示自己的公众号或者网站联系人信息;如何实现鼠标悬停弹出二维码功能呢,请看下面的方法,效果可以看本站页脚的微信二维码效果。

特点

1、纯CSS实现二维码展示功能,减少加载JS;

2、使用CSS3 transform 属性;

第一步

在需要展示二维码的地方添加如下代码,其中<a>标签内容可以根据需要修改成图片等,href=”javascript:”表示<a>标签作为按钮使用,不做跳转,实现url访问拦截。

第二步

在样式表style.css中添加如下代码

首先父元素添加相对定位,然后以”:after” 伪元素在<a></a>元素的内容之后插入微信二维码;transform: scale(0)和opacity: 0实现二维码隐藏。

第三步

同样在style.css中添加如下代码

当鼠标经过时显示二维码。

另一种方法(推荐)

上面的代码中使用了”:after”伪类元素,是在css中引入二维码文件,其实我们也可以利用 img标签将二维码图片放在html中,结构如下:

自然css样式也要做相应的改变,如下:

无论使用哪一种方式都能够实现鼠标悬停弹出二维码功能,但是个人推荐使用第二种方法,因为这种方法很容易修改二维码路径。

大功告成,接下来看看效果吧,可以通过修改css样式适当调整二维码的位置,大小等。具体效果可以看本站页脚。点击前往

  • 打赏
  • 评论 16
  • 分享
  • 点赞 13
转载请注明出处: CSS实现鼠标悬停弹出微信二维码 | 乐朦

欢迎评论

CSS实现鼠标悬停弹出微信二维码 | 有 16 条评论

  1. avatar sand 2017-05-15 at 上午8:18 回复

    您好,我设置了,但都显示网址 。怎么回事啊

    1. avatar Oconner 2017-05-15 at 下午12:52 回复

      可能是哪里的设置不对,你的网站也不能访问,我也不知道呀,哪里有问题还不好说呢

      1. avatar sand 2017-05-15 at 下午7:45 回复

        我和您的公众号,说话了,这里不能截图,要不您能加下我微信么(4191013),我截图给您!万分感谢。很需要这个功能啊!!!!

  2. avatar Ning 2017-04-24 at 下午5:49 回复

    -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; 博主你好,看到目前网站关于微信二维码hover显示加了这一段代码。请问怎么与文中的代码结合呢?本人是CSS菜鸟。

    1. avatar Oconner 2017-04-24 at 下午10:18 回复

      a标签的class属性和css选择器的名称一致就可以了,这里是:”.weixin”。再有不明白的加qq:825641026

  3. avatar 素材火 2017-02-07 at 下午9:56 回复

    没有直接下载啊

    1. avatar Oconner 2017-02-24 at 下午9:12 回复

      复制即可

  4. avatar 轩陌 2016-11-29 at 下午11:21 回复

    给你来个bug吧,微信二维码的div盒子高度不够,嘿嘿

    1. avatar Oconner 2016-12-01 at 上午9:37 回复

      这个到时没写出来,应该给div设置overflow: visible就可以

      1. avatar 轩陌 2016-12-01 at 下午8:14 回复

        你可以不用设置高度

  5. avatar 智慧宫 2016-11-26 at 下午1:06 回复

    这方法不错,可以用在好多地方

    1. avatar Oconner 2016-11-26 at 下午9:26 回复

      嗯,就是,本站的分享按钮就是使用这个方法实现的。

  6. avatar 2016-07-27 at 下午10:54 回复

    不错

    1. avatar Lerm 2016-07-27 at 下午11:45 回复

      谢谢,常来哦

  7. avatar 闲鱼 2016-07-26 at 下午5:01 回复

    有学习到,很棒

    1. avatar Lerm 2016-07-26 at 下午11:44 回复

      谢谢,多多交流。