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

概述我在一行上创建了2个按钮,并且使用我正在使用的模板正确地设计了一些问题. 该按钮有4个状态,但当客户端处于活动状态时,它会出错. 第一个状态是什么都没有发生. 第二个状态是当标志处于活动状态或悬停状态时 在第三个状态下,当我将鼠标悬停在客户端时,我得到： 哪个工作正常 但是当客户端处于活动状态时,我得到的结果与没有任何活动时相同. 那么我可以做些什么来使活动状态等于图3中的悬停状态. html就像 我在一行上创建了2个按钮,并且使用我正在使用的模板正确地设计了一些问题.

该按钮有4个状态,但当客户端处于活动状态时,它会出错.

第一个状态是什么都没有发生.

第二个状态是当标志处于活动状态或悬停状态时

在第三个状态下,当我将鼠标悬停在客户端时,我得到：
哪个工作正常

但是当客户端处于活动状态时,我得到的结果与没有任何活动时相同.
那么我可以做些什么来使活动状态等于图3中的悬停状态.

HTML就像这样：

<li  ui-sref-active="active" > <a  ui-sref="app.clIEnts"  ripple=""><em ></em> ClIEnts  </a> <a    ui-sref="app.addclIEnt" >+</a>  </li>

我使用app.HTML作为模板,我有这个：

<asIDe ng-include="'HTML/main/templates/sIDebar.HTML'" ng-></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;}

总结

以上是内存溢出为你收集整理的html – 如何使用ui-sref-active =“active”设置悬停状态等于使用li clearfix元素的活动状态全部内容，希望文章能够帮你解决html – 如何使用ui-sref-active =“active”设置悬停状态等于使用li clearfix元素的活动状态所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。