鼠标移过显示二维码代码
$(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; } }