教程前言:
将需要的显示的二维码用 div 生成固定在某个位置,然后 display:none,移动鼠标到指定元素就 display:block 显示即可。
HTML 代码:
<ul class="social-group">
<li class="wechat">
<span class="text">微信</span>
<div class="QR-code"></div>
</li>
</ul>
CSS 代码:
.wechat{
background:url("xxx/xxx/微信小图标.png");
background-repeat: no-repeat;
background-size: 40%;
cursor: pointer; // 鼠标移入有小手
&:hover .QR-code{ // hover,点到就显示
display: block;
}
.QR-code{
width: 204px;
height: 204px;
background: url("QR code address");
background-size: 100%; // 和父 div 同长宽
position: absolute; // 绝对定位,需要父级或者祖先元素有一个`position: relative`;
right: 330px; // 移动你想要的位置
bottom: 10px;
display: none; // 默认关掉
}
转载请注明:汇站网 » 鼠标移入即显示二维码