Css 仅在未禁用时悬停并处于活动状态

我使用悬停、活动和禁用来设置按钮样式

但问题是当按钮被禁用时，悬停和活动样式仍然适用

---

如何仅在启用的按钮上应用悬停和活动？

您可以使用伪类，但请注意，

IE的一种方法是在禁用按钮并覆盖css中该类的悬停和活动状态的同时添加一个局部类。或者仅在css中禁用并指定该类的悬停和活动伪属性时删除该类。无论哪种方式，可能都不能完全使用css，您需要使用一些js。
为什么不在css中使用属性“disabled”。这必须适用于所有浏览器

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

您可以在sass（scss）中尝试此..
：

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

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

一种适用于大多数现代浏览器（IE11+，不包括某些mobile Opera和IE浏览器--）的低特异性方法：

指针事件：无
规则将禁用悬停；您不需要使用
.btn[禁用]：hover
选择器来取消悬停样式

（仅供参考，这是简单的HTML指针事件，而不是有争议的抽象输入设备指针事件）
还有
：not（）
选择器，但同样，它也仅在IE9之后才受支持。请参阅：
按钮：悬停：启用
在我的情况下似乎不起作用。在IE11下使用IE9仿真。@谢谢。使用这个方法对我很有效：按钮：悬停：不（[disabled]）通过在一行中选择所有禁用的状态来覆盖所有禁用的状态：
。按钮[disabled]、.button[disabled]：悬停、.button[disabled]：聚焦、.button[disabled]：活动{}
这是一个很好的解决方案，当您希望“悬停禁用”状态看起来与“非悬停禁用”状态相同时这在SASS中是一个很好的解决方案，因为悬停效果将针对禁用的按钮进行处理，除非将其包装在not block中。
 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;
  }
}

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

.btn {
  /* base styles */
}

.btn[disabled]
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.btn:hover {
  color: red;
}