

そんな疑問にお答えします。
hover時にhoverする要素とは別の要素のスタイルを変更したい、その場合の方法を紹介します。
目次
hoverしたときに別要素の値を変更する
今回はhover時に別要素の値を変更するパターンとして次の3つを紹介します。
- 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した要素の子要素の値を変更する場合は、「.parent:hover .child」のように「:hover」の後ろに子要素を指定すればOKです。
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;
}
先ほどの例では「+」で指定しても「~」で指定しても同じ動きになりました。
では両者の違いは何なのかといえば、指定される範囲になります。
「+」で指定する場合は同階層で直後に登場する要素だけに指定がかかります。
対して「~」で指定する場合は同階層で後続に登場するすべての要素に指定がかかります。
「+」で指定する場合
「~」で指定する場合
いわゆる「+」が隣接セレクタ、「~」が間接セレクタというものです。
説明だけ読んでもなかなか頭に入ってこない場合は、こうやって実際にコードを書いて動かしてみれば理解しやすいと思います。
自分の思うように要素の値が操作できるまで、何度も手を動かしながら覚えていきましょう。
投稿者 トシ
コメントを残す