1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <script type="text/javascript" >
6 window.onload=function(){
7 var oDiv1=document.getElementById("div1");
8 var oDiv2=document.getElementById("div2");
9 var timer=null;
10 oDiv1.onmouseover=oDiv2.onmouseover=function(){
11 oDiv2.style.display='block';
12 clearTimeout(timer);
13 }
14 oDiv1.onmouseout=oDiv2.onmouseout=function(){
15 timer=setTimeout(function(){oDiv2.style.display='none';},300);
16 }
17 };
18 </script>
19 <style>
20 #div1{
21 width:200px;
22 height:100px;
23 background-color: red;
24 }
25 #div2{
26 width:150px;
27 height:80px;
28 background-color: pink;
29 margin:10px;
30 display:none;
31 }
32 </style>
33 </head>
34 <body>
35 <div id="div1">
36 </div>
37 <div id="div2">
38 </div>
39 </body>
40 </html>
