<style type="text/css"> div{float: left; margin: 10px;} #div1{border: solid 1px black; width: 60px; height: 60px; background: red; } #div2{border: solid 1px black; width: 200px; height: 200px; background: green; display: none; } </style> <script type="text/javascript"> window.οnlοad=function(){ var odiv1=document.getElementById('div1'); var odiv2=document.getElementById('div2'); var timer=null; odiv1.οnmοuseοver=odiv2.οnmοuseοver=function(){ odiv2.style.display='block'; clearTimeout(timer); odiv1.οnmοuseοut=odiv2.οnmοuseοut=function(){ timer=setTimeout(function(){ odiv2.style.display='none'; clearTimeout(timer); },500); } }; }; </script>
<body> <div> <div id="div1"></div> <div id="div2"></div> </div> </body>