Come impostare lo stato di hover equivale allo stato attivo con li clearfix utilizzando ui-sref-active = "active"

Question

Creo 2 pulsanti su una riga e ho qualche problema con lo styling corretto con il modello che sto usando.

Il pulsante ha 4 stati ma quando il client è attivo non funziona.

Il primo stato è quando non succede nulla.

Il secondo stato è quando il segno + è attivo o in stato di hover

su De terzo stato quando ho con il mouse sopra i clienti ottengo questo: che funziona correttamente.

Ma quando il cliente è attivo ottengo lo stesso risultato di quando niente è attivo. Quindi quello che ho potuto fare per ottenere lo stato attivo è uguale allo stato hover dall'immagine 3.

il codice HTML è questa:

<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> 

Io uso app.html come modello in cui ho questo:

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

l'app.theme.sidebar classe == # bg-bianco

01.235.164,106 mila

Il CSS ho aggiunto è questo funziona senza il modello:

.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; 
} 

penso che abbia qualcosa di todo con questo che è dal modello:

#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

Così Ho fatto un po 'di modifica sulla risposta di Shane, ma non ho ancora ottenuto il risultato che volevo diventasse ancora più strano.

se faccio questo pulsante è verde

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

ma quando aggiungo l'elemento attivo non accade nulla e ottenere lo stesso risultato della prima immagine in questa domanda.

#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

Non stai mira la stessa struttura di selezione, rimuovere il #bg-white ... CSS per .active e provare questo:

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

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

esempio di lavoro: http://codepen.io/anon/pen/PPdOvZ?editors=110

EDIT

Based sulla tua modifica, la classe attiva non viene applicata al tag di ancoraggio. E 'applicata al li, modificare il codice aggiornato a questo:

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