<!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 { 100px; height:100px; background:red; } #div2 { display:none; 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.onmouseover=function (){ clearTimeout(timer); oDiv2.style.display='block'; }; oDiv2.onmouseout=oDiv1.onmouseout=function (){ clearTimeout(timer); timer=setTimeout(function (){ oDiv2.style.display='none'; }, 300); }; }; </script> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> </html>