hoverした時に別のclassのCSSを変更する方法

更新日：2022年6月15日

CSSの疑似要素、:hoverは便利で使う機会は多いかと思います。
ただ:hoverってそのclassにしか適用出来ないって思っていませんか？他のclassのCSSを変更するにはjQueryを使うしかないって思っている方多いのですが、実はそんなことはありません。
今回の記事では:hoverした時に別のclassのCSSを変更する方法をご紹介します。

:hoverしたclassの中にある別のclassのCSSを変更する場合は以下のように記述します。

.aaa:hover .bbb {
	background: #ccc;
}

HTMLはこうなりますね。

aaa
	
bbb

:hoverしたclass別の場所にあるclassのCSSを変更する場合は以下のように記述します。

aaa:hover + .ccc {
	background: #ccc;
}

この場合のHTMLはこうなりますね。

aaa


ccc

違いは + をつけるかどうかだけです。たったこれだけで別のclassのCSSの変更が楽々出来ます。
お試しあれ！