CODE html/css

【CSS】hoverした時に別の要素の値を変更する

更新日:

CSSの擬似要素である「hover」した時にたまに別の要素の値を変更したくなることがありますが、そんな時の書き方です。
今回は以下の2パターンです。

  • aタグの中にある要素の値を変更する
  • aタグの外にある要素の値を変更する

aタグの中にある要素の値を変更する

サンプルコードです。
aタグの中にあるdivタグの背景色を変えます。

See the Pen GRZJYVa by yoshiya.kiryu (@yoshiyakiryu) on CodePen.

a:hover .box {
のようにhover続けて記載すればOK。

aタグの外にある要素の値を変更する

サンプルコードです。
aタグの外にあるdivタグの背景の色を変えます。

See the Pen poyJxdJ by yoshiya.kiryu (@yoshiyakiryu) on CodePen.

a:hover + .anotherbox {
のように「+」で繋げたら背景の色を変更できます。
a:hover ~ .anotherbox {
のように「~」でも可能なようです。

最後に

知らないと手が止まりますが、簡単に出来ますね。
今回は以上です。
ありがとうございました。

-CODE, html/css
-, , , ,

Copyright© kerublog , 2021 All Rights Reserved Powered by STINGER.