使用最轻的触摸:通过规则顺序覆盖。

.btn {
  /* base styles */
}

.btn:hover {
  color: red;
}

.btn:active {
  color: green;
}

.btn:disabled {
  color: #aaa;
}

诀窍在于顺序——首先应用所有非禁用状态，确保它们都具有相同的特异性，最后应用禁用状态，具有相同的特异性。

这对于添加到链接的类或没有disabled属性的非交互式元素不起作用。

(编辑删除了更高特异性的规则，并打乱了指针事件)

使用最轻的触摸:通过规则顺序覆盖。

.btn {
  /* base styles */
}

.btn:hover {
  color: red;
}

.btn:active {
  color: green;
}

.btn:disabled {
  color: #aaa;
}

诀窍在于顺序——首先应用所有非禁用状态，确保它们都具有相同的特异性，最后应用禁用状态，具有相同的特异性。

这对于添加到链接的类或没有disabled属性的非交互式元素不起作用。

(编辑删除了更高特异性的规则，并打乱了指针事件)

在sass (scss)中:

 button {
  color: white;
  cursor: pointer;
  border-radius: 4px;

  &:disabled{
    opacity: 0.4;

    &:hover{
      opacity: 0.4;  //this is what you want
    }
  }

  &:hover{
    opacity: 0.9;
  }
}

.button:active:hover:not([disabled]) {
    /*your styles*/
}

你可以试试这个。

为什么不在css中使用属性“disabled”。这必须适用于所有浏览器。

button[disabled]:hover {
    background: red;
}
button:hover {
    background: lime;
}

一种方法是添加一个特定的类，同时禁用按钮，并覆盖css中该类的悬停和活动状态。或者在css中禁用和指定悬停和活动伪属性时删除一个类。不管怎样，它可能不能完全用css完成，你需要使用一点js。