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{...}

あなたを助けるだろう