仿qq类延迟提示框,js hover显示隐藏效果
html:
<div id="div1"></div> <div id="div2"></div>
css:
div{float: left; margin: 10px;} #div1{width: 50px; height: 50px; background: red;} #div2{width: 250px; height: 180px; background: #CCC; display: none;}
js:
window.onload=function () { var oDiv1=document.getElementById('div1'); var oDiv2=document.getElementById('div2'); var timer=null; oDiv2.onmouseover=oDiv1.onmouseover=function () { clearTimeout(timer); oDiv2.style.display='block'; }; oDiv2.onmouseout=oDiv1.onmouseout=function () { timer=setTimeout(function (){ oDiv2.style.display='none'; }, 500); }; };
效果:
无缝隙显示隐藏,hover效果。就是延迟几秒显示。
本文作者: Jasmine
本文链接: https://www.jianbaizhan.com/article/540
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!