zoukankan      html  css  js  c++  java
  • js----延时提示框

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>选项卡</title>
        <style>
            #div1{
                 300px;
                height: 20px;
                background: #009933;
            }
            #div2{
                 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>

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

  • 相关阅读:
    memento模式
    observe模式
    state模式
    Trie树的简单介绍和应用
    strategy模式
    全组和问题
    SRM 551 DIV2
    全排列问题
    TSE中关于分词的算法的改写最少切分
    template模式
  • 原文地址:https://www.cnblogs.com/1322957664qqcom/p/11307613.html
Copyright © 2011-2022 走看看