使用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;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值