🖱️

要素をhoverしたときに、その他の要素を変更する方法

2023/06/06に公開

はじめに

hover した要素以外の子要素や兄弟要素を変化させる方法について解説したいと思います。

今回は下記の3つのパターンを紹介します。

hoverした要素の子要素を変化させたい場合は下記のように css を指定します。

hoverする要素(親要素):hover 変化させたい要素(子要素) {
  子要素に当てたいスタイル
}

/*css*/
.hover-trigger:hover .hover-blue {
  background-color: #87ceeb;
}

<!-- html -->
<div class="hover-trigger">
  <div class="hover-blue">hoge</div>
</div>

hoverした要素の兄弟要素を変更させたい場合は下記のように css を指定します。

hoverする要素(兄要素):hover + 変化させたい要素(弟要素) {
  弟要素に当てたいスタイル
}

/*css*/
.hover-trigger:hover + .hover-blue {
  background-color: #87ceeb;
}

<!-- html -->
<div class="hover-trigger">hoge</div>
<div class="hover-blue">hoge</div>

hoverした要素の全ての兄弟要素の値を変更させたい場合は下記のように css を指定します。
2つ目のパターンと違うのは「+」ではなく「~」を使っている点です。(以下参考記事)

『 + 』が隣接セレクタと言って要素の直後を指定するセレクタに対し、『 ~ 』は間接セレクタと言って基準の要素以降で条件に合う全ての兄弟要素を指定するセレクタになります。

hoverする要素(兄要素):hover ~ 変化させたい全ての要素(弟要素) {
  全ての弟要素に当てたいスタイル
}

/*css*/
.hover-trigger:hover ~ .hover-blue {
  background-color: #87ceeb;
}

<!-- html -->
<div class="hover-trigger">hoge</div>
<div class="hover-blue">hoge</div>
<div class="hover-blue">hoge</div>

実際にデモで3つのパターンの動きの違いを載せているので参考ください。

要素を hover した時に他の要素を変更するための方法を紹介しました。
開発に当たり hover を使う場面は意外と多いので覚えておいて損は無さそうですね。
ぜひ活用してみてください。