定时器的运用，延时提示框-CSDN博客

先上代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #div1{ width: 50px;height: 50px; background-color: #008000;}
            #div2{ width: 250px;height: 250px; background-color: black;display: none;}
            div{float: left; margin: 10px;;}
        </style>
        <script>
            window.onload=function(){
                var odiv1=document.getElementById('div1');
                var odiv2=document.getElementById('div2');
                var timer=null;
                
                odiv1.onmouseover=function(){
                    clearTimeout(timer);
                    odiv2.style.display='block';
                }
                odiv1.onmouseout=function(){
                    timer=setTimeout(function(){
                        odiv2.style.display='none';
                    },500);
                }
                odiv2.onmouseover=function(){
                    clearTimeout(timer);
                    odiv2.style.display='block';
                }
                odiv2.onmouseout=function(){
                    timer=setTimeout(function(){
                        odiv2.style.display='none';
                    },500)
                }
            }
        </script>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
    </body>
</html>