阻止CSS悬停

Question

我有一个类MyButton定义的按钮，如下所示：

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

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

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

.ButtonDisabled{
 opacity:0.3}

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

我知道我可以通过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{...}

会帮助你