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
}

Answer 2

也许添加

.ButtonDisabled:hover{...}

会帮助你