使用CSS实现悬停显示二维码

在进行广告配置时，要显示的二维码太小，直接扫码扫不出来，于是需要实现鼠标悬停显示大的二维码。

有两种实现的方法：

方法一

直接在要悬停显示二维码的 DOM 元素上添加样式。

<span class="qrcode" 
	  style="display:inline-block;vertical-align:middle;
		   	 background: #fff url(./assets/img/small.png) center top no-repeat;
		     background-size: cover;
		     height: 30px;width: 33px;">
</span>

增加样式：

// DOM 元素添加相对定位
.qrcode {
	position: relative;
}
// ::after 伪元素在 DOM 元素的内容之后插入二维码，并使用 transform: scale(0) 和 opacity: 0 实现二维码的隐藏。
.qrcode::after {
	content: url(./assets/img/big.png);
	position: absolute;
	right: -155px;
	top: -55px;
	width: 140px;
	height: 140px;
	transform-origin: bottom;
    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;
}
// 鼠标悬浮在该 DOM 元素上时显示二维码
.qrcode:hover::after {
	transform: scale(1);
    opacity: 1;
}

但是这种方法没那么好的就是在伪元素中添加的内容大小是不可控的，因此推荐第二种方法来显示。

方法二（推荐）

利用 <img> 标签将二维码图片放在 html 中，然后再使用 css 动画进行隐藏和显示。

<span class="qrcode" 
	  style="display:inline-block;vertical-align:middle;
	  		 background: #fff url(./assets/img/small.png) center top no-repeat;background-size: cover;
	  		 height: 30px;width: 33px;">
	<img src="./assets/img/big.png">
</span>

增加样式：

.qrcode{
	position: relative;
}
.qrcode img{
  	position: absolute;
  	height: 140px;
  	width: 140px;
  	top: -155px;
  	right: -55px;
  	transform-origin: bottom;
  	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;
}
.qrcode:hover img {
  	transform: scale(1);
  	opacity: 1;
}