CSS实现鼠标悬停显示二维码-张弦先生-chrafz.com

WordPress网站建设过程中，需要在网站上展示二维码，用于展示自己的公众号或者网站联系人信息；如何实现鼠标悬停显示二维码功能呢，请看下面chrafz的方法，效果可以看关于页的微信二维码效果。

特点

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

2、使用CSS3 transform 属性；

第一步

在需要展示二维码的地方添加如下代码，其中<a>标签内容可以根据需要修改成图片等,href=”javascript:”表示<a>标签作为按钮使用，不做跳转，实现url访问拦截。

<a class="weixin" href="javascript:">
    wechat
</a>

wechat

</a>

第二步

在样式表style.css中添加如下代码

/*微信二维码 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;
}

/*微信二维码 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中添加如下代码

.weixin:hover::after{
  transform:scale(1);
  opacity: 1;
}

.weixin:hover::after{

transform:scale(1);

opacity: 1;

}

当鼠标经过时显示二维码。

另一种方法(推荐)

上面的代码中使用了”:after”伪类元素，是在css中引入二维码文件，其实我们也可以利用 img标签将二维码图片放在html中，结构如下：

<a class="social weixin" href="javascript:">
<img class="qrcode" src="http://你的路径/qrcode.jpg" alt="微信二维码">
//此处为微信图标。
</a>

//此处为微信图标。

</a>

自然css样式也要做相应的改变，如下：

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;
}