<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> div {float:left; margin:10px;} #div1 {50px; height:50px; background:red;} #div2 {250px; height:180px; background:#CCC; display:none;} </style> <script> window.onload=function () { var oDiv1=document.getElementById('div1'); var oDiv2=document.getElementById('div2'); var timer=null; oDiv1.onmouseover=function () { clearTimeout(timer); //鼠标移出，停止oDiv1的定时器 oDiv2.style.display='block'; }; oDiv1.onmouseout=function () { timer=setTimeout(function (){ //设置500毫秒的停止定时器 oDiv2.style.display='none'; }, 500); }; oDiv2.onmouseover=function () { clearTimeout(timer); }; oDiv2.onmouseout=function () { timer=setTimeout(function (){ //设置500毫秒的移出定时 oDiv2.style.display='none'; }, 500); }; }; </script> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> </html>