|
鼠标划过延迟加载隐藏层的效果,想必大家都有见到过吧,在本文将为大家详细介绍下使用js是如何实现的,感兴趣的朋友可以参考下
复制代码 代码如下: <div id="follow"> <a href="#" onmouseover="showPlusMobile();" onmouseout="hidePlusMobile();" class="btn">+Follow</a> <div class="layer_follow" id="layer_follow" onmouseover="showPlusMobile();" onmouseout="hidePlusMobile();"> <p>这是隐藏层</p> </div> </div> css: 复制代码 代码如下: .layer_follow { display:none } js: 复制代码 代码如下: var isPlusMobileVisible=false; var showTid; var hideTid; function showPlusMobile(){ if(isPlusMobileVisible == false) { showTid = setTimeout("document.getElementById('layer_follow').style.display='block'; isPlusMobileVisible=true;", 500); }else{ clearTimeout(hideTid); } } function hidePlusMobile(){ if(isPlusMobileVisible == true) { hideTid = setTimeout("document.getElementById('layer_follow').style.display='none'; isPlusMobileVisible=false;", 500); }else { clearTimeout(showTid); } }
|
|