<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style >
#div1{width: 400px;height: 40px;background-color: red;}
#div2{width: 250px;height: 30px;background-color: blue;margin: 10px;display: none;} </style> <script>
window.onload=function (){ var oDiv1=document.getElementById("div1");
var oDiv2=document.getElementById("div2"); var timer=null;
oDiv1.onmouseover=oDiv2.onmouseover=function (){
oDiv2.style.display="block";
clearInterval(timer);
}; oDiv2.onmouseout=oDiv1.onmouseout=function(){
timer=setTimeout(function (){
oDiv2.style.display='none';
}, 300);
}
}
</script>
</head>
<body> <div id="div1"></div>
<div id="div2"></div> </body>
</html>