WordPress网站建设过程中，需要在网站上展示二维码，用于展示自己的公众号或者网站联系人信息；如何实现鼠标悬停显示二维码功能呢，请看下面chrafz的方法，效果可以看关于页的微信二维码效果。
特点
1、纯CSS实现二维码展示功能，减少加载JS；
2、使用CSS3 transform 属性；
第一步
在需要展示二维码的地方添加如下代码，其中<a>标签内容可以根据需要修改成图片等,href=”javascript:”表示<a>标签作为按钮使用，不做跳转，实现url访问拦截。
|
1 2 3 |
<a class="weixin" href="javascript:"> wechat </a> |
第二步
在样式表style.css中添加如下代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/*微信二维码 by chrafz.com*/ a.weixin{ position:relative; } .weixin::after{ content: url(images/qrcode.jpg); position: absolute; right: -28px; top: -135px; z-index: 99; width:120px; height: 120px; border: 5px solid #0095ba; border-radius: 4px; transform-origin: top right; transform: scale(0); opacity: 0; -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } |
首先父元素添加相对定位，然后以”:after” 伪元素在<a></a>元素的内容之后插入二维码；transform: scale(0)和opacity: 0实现二维码隐藏。
第三步
同样在style.css中添加如下代码
|
1 2 3 4 |
.weixin:hover::after{ transform:scale(1); opacity: 1; } |
当鼠标经过时显示二维码。
另一种方法(推荐)
上面的代码中使用了”:after”伪类元素，是在css中引入二维码文件，其实我们也可以利用 img标签将二维码图片放在html中，结构如下：
|
1 2 3 4 |
<a class="social weixin" href="javascript:"> <img class="qrcode" src="http://你的路径/qrcode.jpg" alt="微信二维码"> //此处为微信图标。 </a> |
自然css样式也要做相应的改变，如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
a.weixin { position: relative; } .weixin img { 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 { transform: scale(1); opacity: 1; } |
无论使用哪一种方式都能够实现鼠标悬停弹出二维码功能，chrafz推荐使用第二种方法，因为这种方法比较容易修改二维码路径。
评论抢沙发