Jak ustawić stan Hover jest stanem aktywnym z elementem LI cleanfix za pomocą ui-sref-active = "active"

Question

Tworzę 2 przyciski w jednym wierszu i mam problem z prawidłowym ich stylizowaniem za pomocą szablonu, którego używam.

Przycisk ma 4 stany, ale gdy klient jest aktywny, działa nieprawidłowo.

Pierwszy stan to sytuacja, w której nic się nie dzieje.

Drugi stan jest gdy znak + jest włączony lub w stanie najechania

z De państwa trzeciego, gdy unoszą się nad klientów otrzymuję to: który działa poprawnie.

Ale gdy klient jest aktywny i uzyskać ten sam rezultat, co, kiedy nic nie jest aktywne. Więc co można zrobić, aby uzyskać stan aktywny równa stanu najechania z obrazka 3.

html idzie tak:

<li ui-sref-active="active" class="clearfix li-button"> <a class="btn btn-primary-li-left" ui-sref="app.clients" ripple=""><em class="sidebar-item-icon icon-head"></em> Clients </a> <a class="btn btn-primary-li-right " ui-sref="app.addclient" >+</a> </li> 

używam app.html jako szablonu, w którym mam to:

<aside ng-include="'html/main/templates/sidebar.html'" ng-class="app.theme.sidebar"></aside> 

się app.theme.sidebar klasy == # BG-biały

css i dodana jest to, że działa bez szablonu:

.li-button a{ 
    float:left; 
    display: block; 
} 

.li-button a:first-child{ 
    width: 77%; 
} 

.li-button a:last-child{ 
    width: 15%; 
    margin-left: 2%; 
    margin-right: 2%; 
    color: #ffffff; 

} 

.btn-primary-li-left { 
    text-align: left; 
    vertical-align: middle; 

    font-weight: 900; 
    height: 40px; 
} 

.btn-primary-li-right { 
    height: 40px; 
    text-align: center; 
    vertical-align: middle; 

    font-weight: 900; 
} 


.li-button a:last-child:hover { 

    color: #ffffff; 
    background: #0493ac; 
} 

.li-button a:first-child:hover +a:last-child{ 
    color: #ffffff; 
    background: #0e8eac; 
} 

myślę, że ma coś todo z tym co jest z szablonu:

#bg-white .nav > li.active, 
.bg-white .nav > li.active { 
    background-color: #0df9ee !important; 
} 

#bg-white .nav > li:hover > a, 
.bg-white .nav > li:hover > a { 
    background-color: #00f3bd; 
} 
#bg-white .nav > li.active > a, 
.bg-white .nav > li.active > a { 
    background-color: #f32400; 
} 

EDIT

So Trochę zmodyfikowałem odpowiedź Shane'a, ale nadal nie otrzymałem wyniku, którego chciałem, żeby było jeszcze dziwniej.

jeśli mogę to zrobić przycisk jest zielony

#bg-white .nav > li > a.btn-primary-li-left, 
.bg-white .nav > li >a.btn-primary-li-left{ 
    background-color: #05f900 !important; 
} 

ale po dodaniu elementu aktywnego nic się nie dzieje i uzyskać ten sam rezultat jak na pierwszym zdjęciu w tej kwestii.

#bg-white .nav > li > a.btn-primary-li-left.active, 
.bg-white .nav > li >a.btn-primary-li-left.active { 
    background-color: #05f900 !important; 
} 

Answer 1

Nie jesteś kierowania taką samą strukturę wyboru, usuń #bg-white ... CSS dla .active i spróbować tego:

.li-button.active a:first-child + a:last-child { 
    color: #ffffff; 
    background: #0e8eac; 
} 

.li-button.active a { 
    background: #eee; 
} 

przykład robocza: http://codepen.io/anon/pen/PPdOvZ?editors=110

EDIT

Based podczas edycji aktywna klasa nie jest stosowana do znacznika zakotwiczenia. Jest stosowane do li, zmień zaktualizowany kod do tego:

#bg-white .nav > li.active > a.btn-primary-li-left, 
.bg-white .nav > li.active > a.btn-primary-li-left { 
    background-color: #05f900 !important; 
}