クラス"A"が設定されているタグに対してはhoverの適用をするが、クラス"A", "B"が設定されているタグに関してはhoverを適用しない方法

Question

聞きたいこと

あるCSSフレームワークのボタンを、hoverした際に色が変わるようにカスタマイズしようと思っています。
ただ、現状実装したCSSだと、CSSフレームワークとして存在していないようなスタイリングをしてあるボタン(DOMとしては存在している)に対しても、hoverした際にスタイルがあたってしまっています。

より詳細に状態を書くと、

• 見えているbuttonタグには .button クラスが設定されている
• DOMとして存在しているが、スタイルで見えないようにされているbuttonタグには .button .button-disabled クラスが設定されている
• 自分のカスタマイズしたCSSでは、.buttonに対してhoverの設定をしている

といった形です。

.button-disabled クラスが設定されているボタンに関しては、hoverした際に色を変更したくないのですが、その場合どのように定義すればいいでしょうか。

Comments

[maisumakun]

そもそも論ですが、「見えていないボタン」をhoverすること自体が可能なのでしょうか？

[退会済みユーザー]

ブラウザの開発ツールで調べたのですが、見えていないがDOMとして存在していないというわけではなさそうでした。
ボタンの背景色やボタンのテキスト等をなくして存在していないようにスタイリングしてある状態になっているようです。
なのでそこに存在はしているのですが、スタイル的に見えていないように見える状態となっています。

(追記) 質問文の見えていないボタンがたしかにわかりずらかったので、修正しました。

Answer 1

<style>
.a:hover{background-Color:yellow}
.a:not(.b):hover{color:red}
</style>
<div class="a">a</div>
<div class="b">b</div>
<div class="a b">a b</div>