前端-鼠标移入即显示二维码

版权声明：版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/abc666666_6/article/details/84552178

思路

• 将需要的显示的二维码用div生成固定在某个位置，然后display:none，移动鼠标到指定元素就display:block显示即可。

html:

<ul class="social-group">
    <li class="wechat">
        <span class="text">微信</span>
        <div class="QR-code"></div>
    </li>
</ul>

scss:

.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;  // 默认关掉
	 }