JavaScript/延时提示框.html at master · Harrdy2018/JavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>延时提示框</title>
    <style>
        div {
            float: left;margin: 10px;
        }
        #div1 {
            width: 50px;
            height: 50px;
            background: red;
        }
        #div2 {
            width: 250px;
            height: 180px;
            background: #cccccc;
            display: none;
        }
    </style>
    <script>
        window.onload=function ()
        {
          var oDiv1=document.getElementById('div1');
          var oDiv2=document.getElementById('div2');
          var timer=null;
          //鼠标移入
          oDiv1.onmouseover=function ()
          {
              clearTimeout(timer);
              oDiv2.style.display='block';
          };
          //鼠标移出
          oDiv1.onmouseout=function ()
          {
              timer=setTimeout(function ()
              {
                  oDiv2.style.display='none';
              },1000);
              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>