js----延时提示框 - 码农教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        #div1{
            width: 300px;
            height: 20px;
            background: #009933;
        }
        #div2{
            width: 150px;
            height: 20px;
            margin: 10px;
            background: #cccccc;
            display: none;
        }
 </style>
    <script>

window.onload=function () {
   var oDiv1=document.getElementById('div1');
    var oDiv2=document.getElementById('div2');
    var timer='none';
    oDiv1.onmouseover=function () {
        oDiv2.style.display='block';
    };
    oDiv1.onmouseout=function () {
        timer=setTimeout(function () {
            oDiv2.style.display='none'
        },300)
    };
    oDiv2.onmouseover=function () {
        oDiv2.style.display='block';
        clearTimeout(timer);
    }
    oDiv2.onmouseout=function () {

        setTimeout(function () {
            oDiv2.style.display='none'
        },300)
    }
}
    </script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>

</body>

</html>

在鼠标移入和移出的时候，不至于变得那么快，你可以在提示框上做操作。

原文地址：https://www.cnblogs.com/1322957664qqcom/p/11307613.html