导航条变色

作者: 任仪凡 | 来源:发表于2018-07-28 17:02 被阅读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>