jquery - 阻止 CSS 悬停

Question

我有一个按钮，其类 MyButton 定义如下:

.MyButton{
 color:black;
 background:white;}

.MyButton:hover{
 color:white;
 background:black;}

此按钮类用于寻呼机按钮，当寻呼机处于边界时，我将此类添加到其中:

.ButtonDisabled{
 opacity:0.3}

问题是如果用户将鼠标悬停在按钮上，它仍然继承自 MyButton:hover 样式。

我知道我可以用 jquery 控制所有这些来解决悬停问题，但我想知道是否有一种方法可以防止悬停类在按钮也具有 ButtonDisabled 类时触发。

谢谢。

Answer 1

.MyButton:hover{
 color:white;
 background:black;

}

// has more specificity than above selector, so it will stop previous hover effect
.MyButton.ButtonDisabled:hover{
 // write your configs
}