思路

• 將需要的顯示的二維碼用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;  // 預設關掉
	 }