Question

我尝试禁用自定义button并禁用（指针）功能正常工作。

问题是，当我们按下hover按钮时，hover仍然有效。因此我也需要禁用悬停。

我需要为多个自定义ng-disable应用buttons，我无法为每个按钮覆盖css。

代码：

<button class="bt1" ng-disabled="true" >BUTTON</button>
<button class="bt2" ng-disabled="true" >BUTTON</button>

.bt1{
background-color: #e38000;
    border: 0 none;
    border-radius: 15px;
    color: #ffffff;
    font-size: 14px;
    height: 30px;
    width: 135px;
}
.bt1:hover{
background-color: #ffff00;
    color: #999;
}

.bt2{
background-color: #33b3e3;
    border: 0 none;
    border-radius: 15px;
    color: #ffffff;
    font-size: 14px;
    height: 30px;
    width: 135px;
}
.bt2:hover{
background-color: #a2ddf4;
    color: #999;
}

提前谢谢。

Answer 1

而不是

.bt1:hover{
    background-color: #ffff00;
    color: #999;
}
.bt2:hover{
    background-color: #a2ddf4;
    color: #999;
}

使用

.bt1:not([disabled]):hover{
    background-color: #ffff00;
    color: #999;
}
.bt2:not([disabled]):hover{
    background-color: #a2ddf4;
    color: #999;
}

Working fiddle

编辑：

要为所有已禁用的按钮设置常用CSS，您只需添加

即可

button:disabled, button:disabled:hover{
    background-color:red;
}

并用你想要的任何东西替换红色。

Updated Fiddle

当自定义按钮的ng禁用时，禁用css悬停效果

1 个答案: