CSS实现鼠标悬停弹出微信二维码2016年7月26日HTML/CSS12,02644WordPress网站建设过程中，需要在网站上展示微信二维码，用于展示自己的公众号或者网站联系人信息；如何实现鼠标悬停弹出二维码功能呢，请看下面的方法，效果可以看本站页脚的微信二维码效果。特点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” 伪元素在<a></a>元素的内容之后插入微信二维码；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样式适当调整二维码的位置，大小等。具体效果可以看本站页脚。点击前往
years说 2年 之前 回复 您好，我是用wordpress的DIVI主题建站，我对代码一窍不通，我按照您的第二种方法，把第二段代码加到子主题的style.css中了，第一段代码放到页面中的代码模块中，请问哪里放微信标志，哪里放二维码图片啊？
years说 2年 之前 回复 我还是每明白，原谅我太白，在第一段代码中： //此处为微信图标。如果微信标志图片是http://我的路径/qrcode.gif 二维码的图片是http://我的路径/erweima.jpg 代码应该是怎么的呢？ 谢谢！
Oconner说 2年 之前 回复 <img class="qrcode" src="http://你的路径/qrcode.gif" alt="微信二维码"/> <img class="weixin" src="http://你的路径/weixin.gif" alt="微信图标"/>就是这种格式，二维码图片放在上边。微信图标放在下面就可以了。如果微信图标位置不对的话，需要修改你的css
Ning说 3年 之前 回复 -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; 博主你好，看到目前网站关于微信二维码hover显示加了这一段代码。请问怎么与文中的代码结合呢？本人是CSS菜鸟。