美文网首页
js第二十八天

js第二十八天

作者: 三七_3eca | 来源:发表于2018-08-05 19:57 被阅读0次

    导航条变色
    <style type="text/css">
    *{
    margin:0;
    padding:0;
    box-sizing: border-box;
    }
    li{
    list-style: none;
    }
    a{
    text-decoration: none;
    }
    ul{
    width:500px;
    margin:0 auto;
    height:40px;
    line-height: 40px;
    background: #e4393c;
    }
    ul>li{
    float:left;
    }
    ul>li>a{
    display: inline-block;
    width:100px;
    text-align: center;
    color:#fff;
    }
    </style>
    <body>
    <ul>
    <li>
    <a href="#">首页</a>
    </li>
    <li>
    <a href="#">公司介绍</a>
    </li>
    <li>
    <a href="#">联系我们</a>
    </li>
    <li>
    <a href="#">涉及分类</a>
    </li>
    <li>
    <a href="#">综合设计</a>
    </li>
    </ul>
    <script type="text/javascript">
    var li=document.querySelectorAll('ul>li');
    console.log(li);
    for(var i=0;i<li.length;i++){
    li[i].onmouseover=function(){
    this.style.background='#fff';
    this.firstElementChild.style.color='red';
    }
    li[i].onmouseout=function(){
    this.style.background='#e4393c';
    this.firstElementChild.style.color='#fff';
    }
    }
    </script>
    </body>

    相关文章

      网友评论

          本文标题:js第二十八天

          本文链接:https://www.haomeiwen.com/subject/vzfivftx.html