<html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> #div1 { width: 50px; height: 50px; background: red; margin: 10px; display: block; } #div2 { width: 300px; height: 300px; background: #868282; display: none; } </style> </head> <body> <div id="div1"></div> <div id="div2"></div> <script> var odiv1=document.getElementById('div1'); var odiv2=document.getElementById('div2'); var timer=null; odiv1.onmouseover=odiv2.onmouseover=function() { clearTimeout(timer); /*当鼠标移到div2时关闭定时器*/ odiv2.style.display='block'; } odiv1.onmouseout=odiv2.onmouseout=function() { timer=setTimeout( function() { odiv2.style.display='none'; },1000); /*1秒后再消失*/ } </script> </body> </html>