Я создаю 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;
}