WordPress网站建设过程中，需要在网站上展示微信二维码，用于展示自己的公众号或者网站联系人信息；如何实现鼠标悬停弹出二维码功能呢，请看下面的方法，效果可以看本站页脚的微信二维码效果。
特点
1、纯CSS实现二维码展示功能，减少加载JS；
2、使用CSS3 transform 属性；
第一步
在需要展示二维码的地方添加如下代码，其中<a>标签内容可以根据需要修改成图片等,href=”javascript:”表示<a>标签作为按钮使用，不做跳转，实现url访问拦截。
<a class="weixin" href="javascript:">
wechat
</a>第二步
在样式表style.css中添加如下代码
/*微信二维码*/
a.weixin {
position: relative;
}
.weixin::after {
content: url(images/qrcode.gif);
position: absolute;
right: -28px;
top: -135px;
z-index: 99;
width: 120px;
height: 120px;
border: 5px solid #0095ba;
border-radius: 4px;
-webkit-transform-origin: top right;
transform-origin: top right;
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}首先父元素添加相对定位，然后以”:after” 伪元素在元素的内容之后插入微信二维码；transform: scale(0)和opacity: 0实现二维码隐藏。
第三步
同样在style.css中添加如下代码
.weixin:hover::after {
transform: scale(1);
opacity: 1;
}当鼠标经过时显示二维码。
另一种方法(推荐)
上面的代码中使用了”:after”伪类元素，是在css中引入二维码文件，其实我们也可以利用img标签将二维码图片放在html中，结构如下：
<a class="social weixin" href="javascript:">
<img class="qrcode" src="http://你的路径/qrcode.gif" alt="微信二维码">
//此处为微信图标。
</a>自然css样式也要做相应的改变，如下：
a.weixin {
position: relative;
}
.weixin img.qrcode {
position: absolute;
z-index: 99;
top: -135px;
right: -28px;
width: 7.5rem;
max-width: none;
height: 7.5rem;
transform: scale(0);
transform-origin: top right;
opacity: 0;
border: .3125rem solid #0085ba;
border-radius: .25rem;
-webkit-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.weixin:hover img.qrcode {
transform: scale(1);
opacity: 1;
}transform-origin: 定义二维码图片弹出原点位置，其用法参考CSS3 transform-origin 属性
无论使用哪一种方式都能够实现鼠标悬停弹出二维码功能，但是个人推荐使用第二种方法，因为这种方法很容易修改二维码路径。
大功告成，接下来看看效果吧，可以通过修改css样式适当调整二维码的位置，大小等。具体效果可以看本站页脚。
有学习到，很棒
谢谢，多多交流。
不错
谢谢，常来哦
不错
谢谢，常来哦
这方法不错，可以用在好多地方
嗯，就是，本站的分享按钮就是使用这个方法实现的。
这方法不错，可以用在好多地方
嗯，就是，本站的分享按钮就是使用这个方法实现的。
给你来个bug吧，微信二维码的div盒子高度不够，嘿嘿
这个到时没写出来，应该给div设置overflow: visible就可以
你可以不用设置高度
给你来个bug吧，微信二维码的div盒子高度不够，嘿嘿
这个到时没写出来，应该给div设置overflow: visible就可以
你可以不用设置高度
没有直接下载啊
复制即可
没有直接下载啊
复制即可
-webkit-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
博主你好，看到目前网站关于微信二维码hover显示加了这一段代码。请问怎么与文中的代码结合呢？本人是CSS菜鸟。
a标签的class属性和css选择器的名称一致就可以了，这里是：”.weixin”。再有不明白的加qq:825641026
-webkit-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
博主你好，看到目前网站关于微信二维码hover显示加了这一段代码。请问怎么与文中的代码结合呢？本人是CSS菜鸟。
a标签的class属性和css选择器的名称一致就可以了，这里是：”.weixin”。再有不明白的加qq:825641026
您好，我设置了，但都显示网址 。怎么回事啊
可能是哪里的设置不对，你的网站也不能访问，我也不知道呀，哪里有问题还不好说呢
我和您的公众号，说话了，这里不能截图，要不您能加下我微信么（4191013），我截图给您！万分感谢。很需要这个功能啊！！！！
您好，我设置了，但都显示网址 。怎么回事啊
可能是哪里的设置不对，你的网站也不能访问，我也不知道呀，哪里有问题还不好说呢
我和您的公众号，说话了，这里不能截图，要不您能加下我微信么（4191013），我截图给您！万分感谢。很需要这个功能啊！！！！
学习了，好东西~
学习了，好东西~
手机上生效，pc端打开不生效。
可能是设置问题，我这边没有问题的
好东西共分享
手机上生效，pc端打开不生效。
可能是设置问题，我这边没有问题的
好东西共分享
真的是太棒
谢谢，大家的支持是我前进的动力
真的是太棒
谢谢，大家的支持是我前进的动力
正在找，真的不错呀
有用就好了。
正在找，真的不错呀
有用就好了。
//此处为微信图标 这里应该怎么设置，我用的是子主题，如何黏贴CSS，谢谢
子主题的话，css可以直接写在子主题的style.css里面就可以的。不是很复杂
//此处为微信图标 这里应该怎么设置，我用的是子主题，如何黏贴CSS，谢谢
子主题的话，css可以直接写在子主题的style.css里面就可以的。不是很复杂
您好，我是用wordpress的DIVI主题建站，我对代码一窍不通，我按照您的第二种方法，把第二段代码加到子主题的style.css中了，第一段代码放到页面中的代码模块中，请问哪里放微信标志，哪里放二维码图片啊？
微信图标和二维码相邻放置就可以
我还是每明白，原谅我太白，
在第一段代码中：
//此处为微信图标。
如果微信标志图片是http://我的路径/qrcode.gif
二维码的图片是http://我的路径/erweima.jpg
代码应该是怎么的呢？
谢谢！
就是这种格式，二维码图片放在上边。微信图标放在下面就可以了。如果微信图标位置不对的话，需要修改你的css
您好，我是用wordpress的DIVI主题建站，我对代码一窍不通，我按照您的第二种方法，把第二段代码加到子主题的style.css中了，第一段代码放到页面中的代码模块中，请问哪里放微信标志，哪里放二维码图片啊？
微信图标和二维码相邻放置就可以
我还是每明白，原谅我太白，
在第一段代码中：
//此处为微信图标。
如果微信标志图片是http://我的路径/qrcode.gif
二维码的图片是http://我的路径/erweima.jpg
代码应该是怎么的呢？
谢谢！
就是这种格式，二维码图片放在上边。微信图标放在下面就可以了。如果微信图标位置不对的话，需要修改你的css
方法二，如果去掉“//此处为微信图标。”就不显示了，这是怎么回事？
没明白什么意思，你说的是什么不显示，是二维码，还是什么？
方法二，如果去掉“//此处为微信图标。”就不显示了，这是怎么回事？
没明白什么意思，你说的是什么不显示，是二维码，还是什么？
受教了受教了，谢谢大佬指点！
互相学习，互相进步
受教了受教了，谢谢大佬指点！
互相学习，互相进步
不错不错，您老这个思路非常好
互相学习
不错不错，您老这个思路非常好
互相学习
请问css代码是放在哪个文件的style.css里边？我看主题里边有好几个style.css
就是根目录下的style.css 里面，全局都会起作用
哦哦找到了，谢谢
请问css代码是放在哪个文件的style.css里边？我看主题里边有好几个style.css
就是根目录下的style.css 里面，全局都会起作用
哦哦找到了，谢谢
效果很漂亮，感谢分享
效果很漂亮，感谢分享
怎么会有3年前的图片的。
何意
怎么会有3年前的图片的。
何意
你这上个月发布的文章
评论都是几年的了
上月更新的
你这上个月发布的文章
评论都是几年的了
上月更新的
用的同样的方法，以前好用的，后来谷歌不兼容了，有谁遇到同样的问题吗
没遇到过，我现在的分享里面的微信二维码用的就是这个方法，没有不兼容的问题，你说的不兼容具体指什么？
我用的也是四个栏目，本来鼠标移入，二维码都会出现在当前那个的上方，但是我现在在谷歌访问的时候，几个出现的位置在同一个地方了，原来在谷歌上是好用的，现在我试了一下在safari浏览器上才好用，找不出是哪里的问题
如果你说的是你的网站上的这个的话应该是图标有问题，图标的<code>display:float</code>不行
用的同样的方法，以前好用的，后来谷歌不兼容了，有谁遇到同样的问题吗
没遇到过，我现在的分享里面的微信二维码用的就是这个方法，没有不兼容的问题，你说的不兼容具体指什么？
我用的也是四个栏目，本来鼠标移入，二维码都会出现在当前那个的上方，但是我现在在谷歌访问的时候，几个出现的位置在同一个地方了，原来在谷歌上是好用的，现在我试了一下在safari浏览器上才好用，找不出是哪里的问题
如果你说的是你的网站上的这个的话应该是图标有问题，图标的<code>display:float</code>不行