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

Question

我在一行上创建了两个按钮，并且在使用模板时正确设置样式存在一些问题。

按钮有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 ...的{​​{1}} CSS并尝试此操作：

.active

工作示例：http://codepen.io/anon/pen/PPdOvZ?editors=110

修改

根据您的编辑，活动类不会应用于锚标记。它已应用于.li-button.active a:first-child + a:last-child { color: #ffffff; background: #0e8eac; } .li-button.active a { background: #eee; } ，请将更新后的代码更改为：

li