$(document).ready(function(){
var t,t1;
$(".side ul li.code-wrap").hover(function(){
var _this = $(this);
clearTimeout(t1);
t = setTimeout(function(){
_this.find('.popup').show();
},300)
},function(){
var _this = $(this);
clearTimeout(t);
t1=setTimeout(function(){
_this.find('.popup').hide();
},100)
});
});
<li class="code-wrap">
<a href="#"><div class="sidebox"><img src="../assets/img/icon_code.png">二维码</div></a>
<div class="popup">
<a class="code-link">
<img class="code" src="../assets/img/weixin_code.png">
</a>
<span>加真源为微信好友</span>
<div class="arr"></div>
</div>
</li>
.popup {
display: none;
position: absolute;
left: -180px;
bottom: 0;
text-align: center;
border-radius: 2px;
width: 170px;
height: 200px;
background: #fff;
box-shadow: 0 1px 8px rgba(0,0,0,.1);
font-size: 14px;
.code-link {
display: block;
margin: 10px;
color: #777;
.code {
display: block;
margin-bottom: 10px;
}
}
.arr {
position: absolute;
right: -6px;
bottom: 14px;
width: 6px;
height: 11px;
background: url(../img/code_arrow.png) 0 0 no-repeat;
}
}