JavaScript实现延时提示框

最新推荐文章于 2024-06-27 10:29:36 发布

sysy1314

最新推荐文章于 2024-06-27 10:29:36 发布

阅读量476

点赞数

本文链接：https://blog.csdn.net/sysy1314/article/details/80109936

版权

延时提示框就类似于qq上面，将鼠标移到头像时，会出来一个提示框，鼠标移出时，提示框过会儿会消失。

代码如下：

<html>
<head>
    <title>延时提示框</title>
        <style>
        #div1{
            float:left;
            width:100px;
            height:50px;
            background: lightblue;
        }
        #div2{
            float:left;
            width:200px;
            height:200px;
            background: lightpink;
            display:none;
        }
    </style>
    <script>
        window.onload = function(){
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2")
            var timer;
            div2.onmouseover = div1.onmouseover = function(){
                div2.style.display="block";
                clearTimeout(timer);
            };
            div2.onmouseout = div1.onmouseout = function() {
                timer = setTimeout(function () {
                    div2.style.display = "none";
                }, 500);
            }
       /*     div2.onmouseover = function(){
               clearTimeout(timer);
            }
            div2.onmouseout = function(){
                timer =setTimeout(function(){
                    div2.style.display = "none";
                },500);
            }*/

        };
    </script>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    
</body>
</html>