UI-ルータ：UI-SREFフォントの色

Question

を変更していない私は、関連するほぼすべての質問を見て、UI-ルータのUI-SREF機能を使用してナビゲーションリンクのフォントの色を変更するためにショットを与えました。しかし、私はフォントの色の変更は表示されませんが、CSSの中で.activeクラスに追加すると、背景色の変更が見えます。 私は誰かが間違っていることを指摘していただければ幸いです。私は、ルートがアクティブなときにフォントの色を変更したいだけです。すなわち

<nav> 
      <ul> 

       <li ui-sref-active="active" ng-class="{active: activeListItem == 'home'}"> <a ui-sref="Home "><img src="images/icon-information.png"> Introduction </a> </li> 
       <li ui-sref-active="active" ng-class="{active: activeListItem == 'testInfo'}"> <a ui-sref ="TestInfo"> <img src="images/icon-settings.png"> SmartCart Setup</a></li> 
       <li ui-sref-active="active" ng-class="{active: activeListItem =='errorScenarios'}" > <a ui-sref="ErrorScenarios"><img src="images/icon-error.png"> Error Scenarios </a> </li> 
       <li ui-sref-active="active" ng-class="{active: activeListItem == 'contactUs'}" > <a ui-sref="ContactUs"><img src="images/icon-contact.png"> Contact </a> </li> 

      </ul> 

</nav> 

私のCSSは、ここでは、次の

body { 
    font-family: 'Encode Sans', sans-serif; 
    font-weight: 400; 
    margin-top: 0px; 
} 


a { 
    color: #F04a24; 
    text-decoration: none; 
    font-weight: 600; 
    border-bottom: 2px dotted #F04a24; 
} 

a:hover { 
    color: #512b83; 
    border-bottom: 2px dotted #512b83; 
} 

h1 { 
    color: black; 
    font-family: 'Encode Sans', sans-serif; 
    font-weight: 300; 
    font-size: 3em; 
} 

h2 { 
    color: #512b83; 
    font-family: 'Encode Sans', sans-serif; 
    font-size: 1.75em; 
    font-weight: 800; 
    text-transform: uppercase; 
} 

h3 { 
    color: #512b83; 
    font-family: 'Encode Sans', sans-serif; 
    font-size: 1.25em; 
    font-weight: 800; 
    text-transform: uppercase; 
} 
.panel-heading h3, .panel-heading h4 { 
    color: #512b83; 
    font-family: 'Encode Sans', sans-serif; 
    font-weight: 800; 
    text-transform: uppercase; 
} 

nav { 
    font-size: 1em; 
} 

nav a { 
    border-bottom: none; 
    font-size: 1em; 
    font-weight: 400; 
    color: #512b83; 
} 

nav a:hover { 
    border-bottom: none; 
    color: #512b83; 
    font-size: 1em; 
    font-weight: 600; 
} 

nav li img{ 
    width: 20px; 
} 



.active 
{ 
color:red; 
} 

Answer 1

それはあなたのCSSとの問題のように見えます。 私はあなたのプランカのフォークを作成しました。

http://plnkr.co/edit/OWp8jAJqNAmfnzCCklTX?p=preview

li:hover,li:focus, li.active { 
    background:blue; 
    } 

それはli.activeでなければならないことに注意してください。 "アクティブ"は、 "li"タグ内のクラスであり、ホバーやフォーカスのようなプロパティではありません。だからそれは ""のではなく "："。

Answer 2

を持っている私は私

<ul class="sidebar-nav"> 
    <h5 class="sideNav-title">Main Menu</h5> 
    <li class="customNav active" ui-sref-active="active" ng-show="shell.adminAccess"><a ui-sref="dashboard"><i class="fa fa-tachometer" aria-hidden="true"></i> Dashboard</a></li> 
    <li class="customNav" ui-sref-active="active" ng-show="shell.adminAccess"><a ui-sref="userManagement"><i class="fa fa-users" aria-hidden="true"></i> User-Management</a></li> 
    <li class="customNav" ><a data-toggle="collapse" data-parent="#accordion" data-target="#collapseAttendance" aria-expanded="true" aria-controls="collapseAttendance"><i class="fa fa-id-card-o" aria-hidden="true"></i> Attendance <i class="fa fa-caret-down" aria-hidden="true"></i></a></li> 
</ul> 

マイCCSはそれが役に立てば幸いやった方法です。

li.customNav > a:hover,li.active.customNav > a,li.current.customNav > a { 
background-color: @main_color !important; 
color: #ffffff !important; 
border-left: 2.5px solid @primary_color; 
box-shadow: 0 2px 3px rgba(0,0,0,0.20), 0 5px 5px rgba(0,0,0,0.22); 
transition: all 0.3s cubic-bezier(.25,.8,.25,1); 

}