如何使用 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>

class 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

您没有针对相同的选择器结构，删除 .active 的 #bg-white ... CSS 并试试这个：

.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

编辑

根据您的编辑，活动 class 未应用于锚标记。它正在应用于 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;
}

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

How to set the hover state equals the active state with li clearfix element using ui-sref-active="active"

html

css

url-routing

angularjs