只有在未禁用的情况下hover和激活

我使用hover ， 活动和禁用样式button。

但问题是，当button被禁用hover和活动样式仍然适用。

如何应用hover和只激活启用的button？

Answer 1

你可以使用：enabled伪类，但是注意IE<9不支持 ：

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

Answer 2

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

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

Answer 3

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

你可以试试这个..

Answer 4

在sass（s​​css）中：

  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规则将禁用hover; 您将不需要提高.btn[disabled]:hover特异性.btn[disabled]:hoverselect器.btn[disabled]:hoverhover样式。

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

Answer 6

一种方法是在禁用button的同时添加一个部件类，并在css中重写该类的hover和活动状态。 或者在禁用时删除一个类，并只在CSS中指定该类的hover和活动伪属性。 无论哪种方式，它可能不能纯粹用CSS来完成，你需要使用一些JS。

Answer 7

如果你使用LESS或者Sass ，你可以试试这个：

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