Question

我使用悬停，有效和已禁用来设置按钮样式。

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

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

Answer 1

您可以使用:enabled伪类，但通知IE<9不支持：

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

Answer 2

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

你可以试试这个..

Answer 3

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

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

Answer 4

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

Answer 5

一种低特异性方法适用于大多数现代浏览器（IE11 +，不包括某些移动Opera和IE浏览器 - http://caniuse.com/#feat=pointer-events）：

.btn {
  /* base styles */
}

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

.btn:hover {
  color: red;
}

pointer-events: none规则将禁用悬停;您不需要使用.btn[disabled]:hover选择器来提高特异性以使悬停样式无效。

（仅供参考，这是简单的HTML指针 - 事件，而不是有争议的抽象 - 输入 - 设备指针 - 事件）

Answer 6

如果您使用的是LESS或Sass，可以试试这个：

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

Answer 7

一种方法是在禁用按钮时添加一个partcular类，并在css中覆盖该类的悬停和活动状态。或者仅在css中禁用和指定该类上的悬停和活动伪属性时删除类。无论哪种方式，它可能不能完全用css完成，你需要使用一些js。

仅在未禁用时悬停和激活

7 个答案: