<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>index</title> <meta name="author" content="" /> <meta name="copyright" content="" /> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style type="text/css"> #wraper{width: 90%; height:600px; border:1px solid #789} #target{width:150px;height:150px;background: #f1f1f1} #container{width: 300px; height:300px; position:relative; top:0; left: 100px;background: #963} #outer{width:50px;height: 50px;background: #456789; position: relative; top: 50px;left: 50px} </style> </head> <body> <div id="wraper"> <section id="target" class=""> 热点 </section> <div id="container" style="display:none">隐藏的容器 <div id="outer">事件离开了</div> </div> </div> <script type="text/javascript"> var timer = null; function $(id) { return document.getElementById(id); } $("target").onmouseover = function(e) { clearTimeout(timer); $("container").style.display = "block"; } $("target").onmouseout = function(e) { timer = setTimeout(function() { $("container").style.display = "none"; }, 300) } $("container").onmouseover = function(e) { clearTimeout(timer); } /* ***** * IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性 * 解决方法： * var source = e.target || e.srcElement; * var target = e.relatedTarget || e.toElement; */ $("container").onmouseout = function(e) { var e = e || window.event, target = e.relatedTarget || e.toElement; console.log("target: " + target); if (target != $("outer") && target != $("container")) { console.log('out container'); $("container").style.display = "none"; } } </script> </body> </html>