冰冰的小屋

路漫漫其修远兮,吾将上下而求索

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


我在建设自己的 WordPress 个人网站的过程中,用到了 Kratos 主题。这个主题清新美观,有很多我喜欢的元素,但是有些个人需求还是需要在这个模板上做个人客制化。

比如二维码的展示,可以在页尾或者悬浮工具条上展示自己的公众号或者网站联系人信息。原来的主题是放在了右下角控件中,而且鼠标悬停到微信图标上二维码显现,这个功能被原作者写在了 JS 文件里,那如何用 CSS 实现鼠标悬停弹出二维码功能呢,请看下面的方法,效果可以参看本站页脚的微信二维码效果。

特点

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

2、使用 CSS3 transform 属性;

实现方法

我们可以利用 img 标签将二维码图片放在 a 标签链接中,为了防止跳转 href 超链接写 “javascript:void(0)“。结构如下:

 

同事 CSS 样式需要做相应的表现,如下:

这种方式能够实现鼠标悬停弹出二维码功能,并且很容易修改二维码路径。

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

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注