您可以用途：enabled伪类，但是 * 注意IE<9不支持它 *：

button:hover:enabled{
    /*your styles*/
}
button:active:enabled{
    /*your styles*/
}

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

你可以试试这个。

为什么不在css中使用属性“disabled”呢？这必须在所有浏览器上都有效。

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

如果您使用的是LESS或Sass，您可以尝试以下操作：

.btn {
  &[disabled] {
    opacity: 0.6;
  }
  &:hover, &:active {
    &:not([disabled]) {
      background-color: darken($orange, 15);
    }
  }
}

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

.btn {
  /* base styles */
}

.btn:hover {
  color: red;
}

.btn:active {
  color: green;
}

.btn:disabled {
  color: #aaa;
}

诀窍在于顺序--首先应用所有非禁用状态，确保它们都具有相同的特性，最后应用具有相同特性的禁用状态。
这对于添加到链接的“disabled”类或非交互式元素不起作用，因为它们没有disabled属性。
（编辑后删除了更高特异性的规则，并扰乱了pointer-events）

在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;
  }
}

一种方法是在css中添加一个partcular类，同时禁用按钮并覆盖该类的hover和active状态;或者只在css中删除一个类，同时禁用并指定该类的hover和active伪属性。无论哪种方法，这可能都不能完全用css来完成，你需要使用一点js。

当我得到一个最简单的方法时，我也在寻找它。
对于纯CSS：

.button {
  background-color: #222222;
  color: #ffffff;
}

.button:hover {
  background-color: #111111;
}

.button:active {
  background-color: #000000;
}

.button:disabled {
  opacity: 0.5;
}

.button:disabled:hover {
  /*To see no effect except the disabled ones, resets the effects of hover to default of button*/
  background-color: #222222;
  color: #ffffff;
}

对于SCSS：

.button{
  background-color: #222222;
  color: ffffff;
  &:hover{
    background: #111111;
  }
  &:active{
    background: #000000;
  }
  &:disabled{
    opacity: 0.5;
    &:hover{
      /*To see no effect except the disabled ones, resets the effects of hover to default of button*/
      background-color: #222222;
      color: #ffffff;
    }
  }
}

我在我的项目中使用下面的一个。

.bg-brand-3 {
  background-color: black;
  &[type="button"]:enabled {
    &:hover {
      background-color: orange;
    }
    &:active {
      background-color: green;
    }
  }
  &[type="submit"] {
    // css
  }
}

:enable的含义与:not(:disabled)相同