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

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

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

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

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

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

hoverした要素の子要素の値を変更する

See the Pen
hover時に別要素をアクション1 by toshi (@toshi78)
on CodePen.

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

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

hoverした要素の兄弟要素の値を変更する①

See the Pen
hover時に別要素にアクション2 by toshi (@toshi78)
on CodePen.

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

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

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

hoverした要素の兄弟要素の値を変更する②

See the Pen
hover時に別要素にアクション3 by toshi (@toshi78)
on CodePen.

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

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

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

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

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

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

「+」で指定する場合

「~」で指定する場合

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

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

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

• Twitter
• Facebook

投稿者 トシ

関連記事

【まるっと解説！】YouTubeをレスポンシブで埋め込む方法

CSSのみで三角形を作る方法

【CSS】background-image: linear-gradientを使って背景画像を暗くする方法

【CSS】背景色を2色で分割表示する方法

【Flexbox】グローバルナビゲーションを２段にする方法【CSS】

CSSで背景を斜めに区切る方法３選