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

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

特点

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

2、使用 CSS3 transform 属性；

实现方法

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

<!-- 自己加的页脚微信展示开始 -->
<a id="weixin" href="javascript:void(0)">
<i class="fa fa-weixin"></i>
<img src="http://你的路径/qrcode.jpg">
</a>
<!-- 自己加的页脚微信展示结束 -->

同时 CSS 样式需要做相应的表现，如下：

/*页脚微信效果开始*/
a#weixin {
position: relative;
}
#weixin img {
visibility: hidden;
opacity: 0;
transform: translate(0, 10px);
transition: all 0.3s ease-in-out;
position: absolute;
right: -30px;
bottom: 40px;
width: 150px;
height: 150px;
}
#weixin:hover img {
visibility: visible;
transform: translate(0, 0px);
opacity: 1;
}
/*页脚微信效果结束

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

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