JS实现延迟隐藏功能----类似QQ头像鼠标放上展示…

2018-06-24 01:10:30来源：未知阅读 ()

JS实现延迟隐藏

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>延迟隐藏</title>
 6     <style>
 7     #div1{
 8         width:100px;
 9         height:100px;
10         background:yellow; 
11         border: 5px solid #999;
12         border-radius: 10px;
13         position: absolute;
14         right: 50px;
15         text-align: center;
16         line-height: 100px;
17         margin-bottom:10px;
18     }
19     #div2{
20         width:200px;
21         float: left;
22         height:200px;
23         border: 5px solid #999;
24         border-radius: 10px;
25         position: absolute;
26         right:160px;
27         text-align: center;
28         line-height: 200px;
29         background:green;
30         display:none;
31     }
32 </style>
33 
34 
35 <script>
36     window.onload=function(){
37         var div1=document.getElementById("div1");
38             div1.innerHTML="鼠标请放上！";
39         var div2=document.getElementById('div2');
40             div2.innerHTML="鼠标请移开！";
41         var timer=null;
42         div1.onmouseover= function(){     
43              clearTimeout(timer);
44              div2.style.display='block';
45         };
46          div1.onmouseout= function(){
47             clearTimeout(timer);
48                timer= setTimeout(function(){
49                      div2.style.display='none';
50                 }, 700);
51         };
52         div2.onmouseover=function(){
53             clearTimeout(timer);
54         };
55         div2.onmouseout=function(){
56             clearTimeout(timer);
57              timer=setTimeout(function(){div2.style.display='none';},700);           
58         }
59     }
60 </script>
61 
62 </head>
63 <body>
64 <div id="div1"></div>
65 <div id="div2"></div>
66     
67 </body>
68 </html>