JavaScript实现延时提示框

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

    #div1 {

        width: 50px;

        height: 50px;

        background: red;

        margin: 10px;

        display: block;

    }

    #div2 {

        width: 300px;

        height: 300px;

        background: #868282;

        display: none;

    }

</style>

</head>

<body>

<div id="div1"></div>

<div id="div2"></div>

<script>

    var odiv1=document.getElementById('div1');

    var odiv2=document.getElementById('div2');

    var timer=null;

    odiv1.onmouseover=odiv2.onmouseover=function()

    {

        clearTimeout(timer);  /*当鼠标移到div2时关闭定时器*/

        odiv2.style.display='block';

    }

    odiv1.onmouseout=odiv2.onmouseout=function()

    {

        timer=setTimeout(

        function()

        {

            odiv2.style.display='none';

        },1000);   /*1秒后再消失*/

    }

</script>

</body>

</html>
巴特西

JavaScript实现延时提示框

最新文章

热门文章
