होवर स्थिति कैसे सेट करें सक्रिय स्थिति को ui-sref-active = "active"

Question

का उपयोग करके ली clearfix तत्व के साथ सक्रिय स्थिति के बराबर है। मैं एक पंक्ति पर 2 बटन बनाता हूं और टेम्पलेट के साथ उन्हें सही ढंग से स्टाइल करने में कुछ समस्या है।

बटन में 4 राज्य हैं लेकिन जब ग्राहक सक्रिय है तो यह गलत हो जाता है।

पहला राज्य तब होता है जब कुछ भी नहीं होता है। जो सही ढंग से काम करता है:

दूसरे राज्य जब + चिह्न सक्रिय या मंडराना स्थिति

डी तीसरा राज्य पर है जब मैं ग्राहकों मैं इस मिल पर होवर है।

लेकिन जब ग्राहक सक्रिय है मैं जब कुछ भी सक्रिय है के रूप में ही परिणाम मिलता है। तो क्या मैं सक्रिय राज्य पाने के लिए कर सकता है तस्वीर से होवर स्थिति के बराबर 3.

एचटीएमएल इस प्रकार है:

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

मैं टेम्पलेट जहां के रूप में app.html का उपयोग मैं इस है:

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

वर्ग app.theme.sidebar == # bg-सफेद

+०१२३५१६४१०६

सीएसएस मैं जोड़ा इस यह टेम्पलेट के बिना काम करता है:

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

मुझे लगता है कि इस के साथ कुछ कार्य करने की जो टेम्पलेट से है:

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

संपादित

तो मैंने शेन के जवाब पर थोड़ा बदलाव किया लेकिन मुझे अभी भी नतीजा नहीं मिला कि मैं चाहता था कि यह भी वीडर हो।

अगर मैं ऐसा करने के लिए बटन हरे

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

है, लेकिन जब मैं सक्रिय तत्व कुछ भी नहीं जोड़ने होता है और इस सवाल में पहली तस्वीर के रूप में एक ही परिणाम मिलता है।

#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

आप एक ही चयनकर्ता संरचना को लक्षित नहीं करते .active के लिए #bg-white ... सीएसएस हटाने और इस प्रयास करें:

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

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

कार्य उदाहरण: http://codepen.io/anon/pen/PPdOvZ?editors=110

संपादित

आधारित आपके संपादन पर, सक्रिय वर्ग एंकर टैग पर लागू नहीं किया जा रहा है। यह li करने के लिए लागू किया जा रहा है, इस के लिए अपने अपडेट कोड बदलने के लिए:

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