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