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