2022/3/10 （更新日: 2022/3/11）

【CSS】hoverしたときに別要素の値を変更する方法

hoverしたら別の場所にある要素の値が変わるようにしたいけど、どうやるの？

そんな疑問にお答えします。

hover時にhoverする要素とは別の要素のスタイルを変更したい、その場合の方法を紹介します。

hoverしたときに別要素の値を変更する

今回はhover時に別要素の値を変更するパターンとして次の３つを紹介します。

<div class="parent">
  ここをホバー
  <p class="child"></p>
</div>

.parent:hover .child {
  background: pink;
}

hoverした要素の子要素の値を変更する場合は、「.parent:hover .child」のように「:hover」の後ろに子要素を指定すればOKです。

<div class="brothers1">
  ここをホバー
</div>
<div class="brothers2"></div>

.brothers1:hover + .brothers2 {
  background: pink;
}

ここでは「+」をつけて指定することで「同階層のすぐ後ろの要素のみ」という意味になります。

ちなみにここでは

.brothers1:hover ~ .brothers2 {
  background: pink;
}

のように「~」で指定しても同じ動きになります。

<div class="brothers1">
  ここをホバー
</div>
<div class="bro brothers2">同階層（直後の要素）</div>
<div class="bro brothers3">同階層</div>
</div>

.brothers1:hover ~ .bro {
  background: pink;
}

先ほどの例では「+」で指定しても「~」で指定しても同じ動きになりました。

では両者の違いは何なのかといえば、指定される範囲になります。

「+」で指定する場合は同階層で直後に登場する要素だけに指定がかかります。

対して「~」で指定する場合は同階層で後続に登場するすべての要素に指定がかかります。

「+」で指定する場合

「~」で指定する場合

いわゆる「+」が隣接セレクタ、「~」が間接セレクタというものです。

説明だけ読んでもなかなか頭に入ってこない場合は、こうやって実際にコードを書いて動かしてみれば理解しやすいと思います。

自分の思うように要素の値が操作できるまで、何度も手を動かしながら覚えていきましょう。

投稿者トシ