JS延时提示框

最新推荐文章于 2019-09-15 00:04:55 发布

blacop

最新推荐文章于 2019-09-15 00:04:55 发布

阅读量442

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/blacop/article/details/52692133

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    div {float:left;margin: 10px}
    #div1{width:50px;height: 50px;background: red;}
    #div2{width:250px;height: 250px;background: #CCCCCC;display: none;}
</style>
<script>
    window.onload=function(){
        var oDiv1=document.getElementById('div1');
        var oDiv2=document.getElementById('div2');
        var timer=null;

        clearTimeout(timer);
        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>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>