延时提示框(定时器的使用)

实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
    *{margin: 0px;padding: 0px;}
    body{padding: 100px;}
    #div1{width: 50px;height: 50px;background: #a2d0ff;float: left;margin-right: 10px;}
    #div2{width: 100px;height: 150px;background: #f5cbfc;float: left;display: none;}
</style>
<script>
    window.onload=function(){
        var oDiv1 = document.getElementById('div1');
        var oDiv2 = document.getElementById('div2');
        var timer = null;

        oDiv2.onmouseover=oDiv1.onmouseover=function(){
            clearInterval(timer);
            oDiv2.style.display='block';
        }

        oDiv2.onmouseout=oDiv1.onmouseout=function(){
            timer=setInterval(function(){
                oDiv2.style.display='none';
            },300);
        }

    }
</script>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

实现效果：

鼠标移入div1时div2显示，且可以在两者之间来回切换。设置定时器延时隐藏。。。达到即使两者之间有一定间隙也不会随着鼠标移出而隐藏div2。

高否？富否？帅否？否？滚去学习！