延时显示（类QQ头像显示）

weixin_30920091

于 2015-09-08 17:15:00 发布

阅读量145

点赞数

原文链接：http://www.cnblogs.com/heboliufengjie/p/4792335.html

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com">
<meta name="copyright" content="智能社 - zhinengshe.com">
<title>智能社 - www.zhinengshe.com</title>
<style>
div { float:left; margin:10px; }
#div1 { width:100px; height:100px; background:red; }
#div2 { display:none; width:300px; height:300px; background:green; }
</style>
<script>
window.onload=function (){
    var oDiv1=document.getElementById('div1');
    var oDiv2=document.getElementById('div2');
    var timer=null;

    oDiv2.onmouseover=oDiv1.οnmοuseοver=function (){
        clearTimeout(timer);
        oDiv2.style.display='block';
    };

    oDiv2.onmouseout=oDiv1.οnmοuseοut=function (){
        clearTimeout(timer);
        timer=setTimeout(function (){
            oDiv2.style.display='none';
        }, 300);
    };
};
</script>
</head>

<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

转载于:https://www.cnblogs.com/heboliufengjie/p/4792335.html

weixin_30920091

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
延时显示（类QQ头像显示）

<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="智能社 - zhinengshe.com"><meta name="copyright" content="智能社 - zhinengshe.com"&g...
复制链接

扫一扫