当鼠标移入时立即展示二维码教程

正文：

睡前分享个汇站自己做出来的二维码功能，如本站既是，将需要显示的二维码生成一个 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;  // 默认关掉
	 }  

转载请注明：汇站网 » 当鼠标移入时立即展示二维码教程