CSSの擬似要素である「hover」した時にたまに別の要素の値を変更したくなることがありますが、そんな時の書き方です。
今回は以下の２パターンです。
- 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 {
のように「~」でも可能なようです。
最後に
知らないと手が止まりますが、簡単に出来ますね。
今回は以上です。
ありがとうございました。