要控制的CSS多类选择器：悬停效果

Question

我有一个带有：hover伪类的div，它应用了许多CSS效果来向用户表明它们是否悬停在它上面。

当用户通过添加.disable类来悬停它时，如何禁用CSS效果？

http://jsfiddle.net/nQUSn/1/

Answer 1

除IE以外的所有浏览器＆lt; 9：

将.a:hover {更改为.a:not(.disable):hover {

Answer 2

您可以创建一个选择器a.disable：hover，重置该锚元素上的样式。例如，如果你的a：hover css是：

a:hover {
    color: red;
}

链接颜色通常为蓝色，您的禁用CSS可能如下所示：

a.disable:hover {
    color: blue;
}

Answer 3

无需使用＆＃34; .disable＆＃34;类。您可以使用:disabled伪类链接:hover伪类：

elem {
  color : blue;
}
elem:hover {
  color : lightblue;
}
elem:disabled, elem:disabled:hover {
  color : grey;
}