hoverした時に別のclassのCSSを変更する方法
更新日：2022年6月15日
CSSの疑似要素、:hoverは便利で使う機会は多いかと思います。
ただ:hoverってそのclassにしか適用出来ないって思っていませんか？他のclassのCSSを変更するにはjQueryを使うしかないって思っている方多いのですが、実はそんなことはありません。
今回の記事では:hoverした時に別のclassのCSSを変更する方法をご紹介します。
:hoverしたclassの中にある別のclassのCSSを変更する場合は以下のように記述します。
1 | .aaa:hover .bbb { |
2 | background: #ccc; |
3 | } |
HTMLはこうなりますね。
1 | <div class="aaa"> |
2 | aaa |
3 | <div class="bbb">bbb</div> |
4 | </div> |
:hoverしたclass別の場所にあるclassのCSSを変更する場合は以下のように記述します。
1 | aaa:hover + .ccc { |
2 | background: #ccc; |
3 | } |
この場合のHTMLはこうなりますね。
1 | <div class="aaa"> |
2 | aaa |
3 | </div> |
4 | <div class="ccc"> |
5 | ccc |
6 | </div> |
違いは + をつけるかどうかだけです。たったこれだけで別のclassのCSSの変更が楽々出来ます。
お試しあれ！
