我在一行上创建了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;
}
解决方法
您没有定位相同的选择器结构,删除#bg-white … CSS for .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?editors=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;
}
