js实现下拉菜单效果

最新推荐文章于 2022-09-29 10:49:41 发布

weixin_34175509

最新推荐文章于 2022-09-29 10:49:41 发布

阅读量91

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/2879089/blog/731329

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        body{font-family: "Microsoft YaHei";font-size: 12px;color: #666;}
        .container{width: 100px;margin: 50px auto;}
        ul{list-style: none;font-size: 14px;border: 1px solid #ccc;color: #666;width: 100px;height: 150px;display: none;}
        a{text-decoration: none;display: block;width: 100px;height: 29px;line-height: 29px;text-align: center;color: #ccc;border-bottom: 1px solid #ccc;}
        #shezhi{background: #eaeaea;color: #666666;border-bottom: none;}
        .nobot{border-bottom: none;}
    </style>
</head>
<body>
    <div class="container">
        <a href="#"id="shezhi"class="nobot">设置</a>
        <ul id="menue">
            <li><a href="#">清除记录</a></li>
            <li><a href="#">清除记录</a></li>
            <li><a href="#">清除记录</a></li>
            <li><a href="#">清除记录</a></li>
            <li><a href="#"class="nobot">清除记录</a></li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    var oMenue=document.getElementById('menue');
   var oShwzhi=document.getElementById('shezhi');
    var oA=oMenue.getElementsByTagName('a');
    var timer =null;
    oShwzhi.οnmοuseοver= oMenue.οnmοuseοver=function(){
        clearInterval(timer);
        oMenue.style.display = 'block';
    };
    oShwzhi.οnmοuseοut=oMenue.οnmοuseοut=function(){
        timer = setInterval(function(){
            oMenue.style.display = 'none';
        },300);
    };
    for(var i=0;i<oA.length;i++){
        oA[i].οnmοuseοver=function(){
            clearInterval(timer);
            this.style.background="#ccc";
            this.style.color="#fff";
        };
        oA[i].οnmοuseοut=function(){
            this.style.background="";
            this.style.color="#ccc";
        }
    }
</script>
</html>

转载于:https://my.oschina.net/u/2879089/blog/731329