<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style> div{float:left;margin:20px;} #div1{width:100px;height:100px;background: #f00;} #div2{width:200px;height:200px;background:#ccc;display: none;} </style> <script type="text/javascript"> window.onload=function(){ var oDiv1=document.getElementById("div1"); var oDiv2=document.getElementById("div2"); var timer=null; 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> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> </html>
