很简单的代码，不多解释，一看就懂。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #div1{width:50px; height:50px; background:red;} #div2{width:200px; height:150px; background:grey; display:none;} </style> </head> <body> <div id="div1"></div> <div id="div2"></div> <script> window.onload = function(){ var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); var timer = null; div1.onmouseover = function(){ clearTimeout(timer); timer = setTimeout(function(){ div2.style.display = "block"; },500); }; div1.onmouseout = function(){ timer = setTimeout(function(){ div2.style.display = "none"; },500); }; div2.onmouseover = function(){ clearTimeout(timer); timer = setTimeout(function(){ div2.style.display = "block"; },500); }; div2.onmouseout = function(){ timer = setTimeout(function(){ div2.style.display = "none"; },500); }; }; </script> </body> </html>
原文：http://www.cnblogs.com/zcynine/p/5065459.html