实现代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> *{margin: 0px;padding: 0px;} body{padding: 100px;} #div1{width: 50px;height: 50px;background: #a2d0ff;float: left;margin-right: 10px;} #div2{width: 100px;height: 150px;background: #f5cbfc;float: left;display: none;} </style> <script> window.onload=function(){ var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var timer = null; oDiv2.onmouseover=oDiv1.onmouseover=function(){ clearInterval(timer); oDiv2.style.display='block'; } oDiv2.onmouseout=oDiv1.onmouseout=function(){ timer=setInterval(function(){ oDiv2.style.display='none'; },300); } } </script> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> </html>
实现效果：
鼠标移入div1时div2显示，且可以在两者之间来回切换。设置定时器延时隐藏。。。达到即使两者之间有一定间隙也不会随着鼠标移出而隐藏div2。