Question

目前，我有以下HTML

<div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
        <ul class="nav nav-sidebar" data-ng-controller="NavbarController">
            <li class="nav-item" data-ng-class="{'active':getClass('/a')}" data-ng-show="user.admin"><a href="#/a">a</a></li>
            <li class="nav-item" data-ng-class="{'active':getClass('/b')}" data-ng-show="user.admin"><a href="#/b" >b</a></li>
            <li class="nav-item" data-ng-class="{'active':getClass('/c')}" data-ng-show="user.admin"><a href="#/c" >c</a></li>
            <li class="nav-item" data-ng-class="{'active':getClass('/d')}" data-ng-show="user.admin"><a href="#/d" >d</a></li>
            <li class="nav-item" data-ng-class="{'active':getClass('/e')}" data-ng-show="user.admin"><a href="#/e" >e</a></li>
            <li class="nav-item" data-ng-class="{'active':getClass('/f')}" data-ng-show="user.admin"><a href="#/f">f</a></li>
            <li class="nav-item" data-ng-class="{'active':getClass('/g')}" data-ng-show="user.admin"><a href="#/g">g</a></li>
            <li class="nav-item" data-ng-click="action()" data-ng-show="user.admin"><a href="#/h">h</a></li>
        </ul>
    </div>
....

我试图控制各个导航栏元素悬停或点击时的颜色，但我似乎没有多少运气。

从我从阅读中收集的内容中我需要关注:hover和:active，但无论我尝试CSS选择器的哪种方式我都无法改变颜色。

如何让导航栏的各个元素具有自定义悬停和活动颜色？

Answer 1

你在寻找这个......

DEMO

我在css

中使用 nth-child

li:nth-child(1):hover {
    background: red;
}

Answer 2

由于我的声誉，我无法发表评论。所以给它回答。你可以通过使用.each迭代nav-item类并使用你可以为每个元素定义自己的css属性获得data-ng-class属性来完成这项工作。

侧边栏导航元素不会改变颜色

2 个答案: