html - Primeng 禁用按钮悬停时会改变颜色

Question

我更改了悬停时的 p 按钮样式。

我的问题是，当按钮状态设置为禁用并且我将其悬停时，颜色也会发生变化。

<button pButton type="submit" label="Launch @RT" class="ui-button-success color" [disabled]="groupList.length+ejList.length>0 ? false: true"></button>

然后在 CSS 中:

.ui-button-success.ui-state-disabled, .ui-widget:hover:disabled, .ui-button-success.color{
    background-color: white !important;
    color: #00965E;
}
.ui-button.ui-button-success:hover
{
    background-color: #00965E !important;
    color: white;
}

当按钮样式被禁用并且我将其悬停时，如何取消更改按钮样式。但是当它启用时改变颜色

Answer 1

尝试在此处使用 :not() 选择器和 :hover

.ui-button-success {
  background-color: white;
  color: #00965E;
}

.ui-button-success:not([disabled]):hover {
  background-color: #00965E;
  color: white;
}

<button type="button" class="ui-button-success color" disabled>foobar</button>
<button type="button" class="ui-button-success color">foobar</button>