使用ui-sref-active ="active"如何使用li clearfix元素设置悬停状态等于活动状态

Question

我在一行上创建了2个按钮,并且使用我正在使用的模板正确设置样式有一些问题.

该按钮有4种状态,但当客户端处于活动状态时会出错.

第一个状态是没有任何事情发生.

第二个状态是+符号处于活动状态或处于悬停状态

在第三个状态,当我将鼠标悬停在客户端上时,我得到了:这是正常的.

但是当客户端处于活动状态时,我会得到与没有活动时相同的结果.那么我能做些什么来使活动状态等于图3中的悬停状态.

html是这样的:

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

我添加的CSS是没有模板的情况下工作:

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

编辑

所以我对Shane的答案做了一点修改,但我仍然没有得到结果,我希望它甚至更奇怪.

如果我这样做按钮是绿色的

#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

你没有定位相同的选择器结构,删除#bg-white ...CSS .active并试试这个:

.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？edit = 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;
}