zoukankan      html  css  js  c++  java
  • 延迟的菜单

     不多说,一看代码就清楚,这样不必一定要让两个层嵌套,两个层有一定的margin也是可以的!

    <!doctype html>
    <html>
        <head>
            <title></title>
            <style>
                #div1{50px;height:49px;background:#999;float:left;margin-right:20px;}
                #div2{150px;height:149px;background:#ccc;float:left;display:none;}
            </style>
            <script type="text/javascript">
                window.onload = function(){
                    var oDiv1 = document.getElementById("div1");
                    var oDiv2 = document.getElementById("div2");
                    var timer = null;
                    oDiv1.onmouseover = oDiv2.onmouseover = function(){ // 两个层的mouverover 事件实际要实现的效果是一样的,就是让让菜单层显示。
                        oDiv2.style.display = "block";
                        clearInterval(timer);//清除定时器,不让菜单隐藏
                    };
                    oDiv1.onmouseout = oDiv2.onmouseout = function(){//两个层的mouseout 事件也是一样的,就是开个定时器在一段时间后让菜单隐藏,
                        timer = setTimeout(function(){
                            oDiv2.style.display = "none";
                        },500);
                    };
                    
                };
            </script>
        </head>
        <body>
            <div id="div1">
            </div>
            <div id="div2">
            </div>
        </body>
    </html>
  • 相关阅读:
    HTML事件处理程序---内联onclick事件
    js的width函数
    了解跨站请求伪造CSRF
    离线百度地图
    GetOverlappedResult 函数
    OVERLAPPED 结构
    SetupDi系列函数
    Linux 各个命令的缩写原型
    Linux grep命令
    Linux if[......] then ......else...... fi
  • 原文地址:https://www.cnblogs.com/web-xuchang/p/3582527.html
Copyright © 2011-2022 走看看