Как установить состояние зависания, равное активному состоянию с помощью элемента li clearfix, используя ui-sref-active = "active"

Я создаю 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 i, это он работает без шаблона:

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

Ответ 1