<!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 timer1 = null;
var timer2 = null;
odiv1.onmouseover=function(){
clearTimeout(timer2);
odiv2.style.display = 'block';
};
odiv1.onmouseout=function(){
timer1 = setTimeout(function(){
odiv2.style.display='none';
},500);
};
odiv2.onmouseover=function(){
clearTimeout(timer1);
};
odiv2.onmouseout=function(){
timer2=setTimeout(function(){
odiv2.style.display = 'none';
},500);
};
};
</script>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>