今回は「:hover」で別要素をアクションさせる方法を紹介します。
私自身、CSSを学習しはじめたころ、「なるほど」と思ったのでメモ書きとして記事を書きました。
困っている方の参考になれば幸いです。
コード
子要素を変化させる
まずは子要素を変化させるコードです。
See the Pen
hover-action-child by t.h (@tomtom15)
on CodePen.
親要素である青い部分にhoverしてみてください。
子要素の白い部分も青くなります。
CSSの書き方は、
親要素:hover 子要素{
アクション内容
}
です。
非子要素を変化させる
次は子要素ではない別要素を変化させるコードです。
See the Pen
hover-action-another by t.h (@tomtom15)
on CodePen.
先ほどの子要素を変化させるコードと違う点は
「:hover」→「:hover+」としている点です。
まとめ
いかがでしたでしょうか。
とても簡単ですよね。
私は、ボタンのhoverで矢印を動かして注意を引き付けるために使ったりしています。
これを使ってWEBサイトにちょっとした工夫を入れたり、アレンジして応用してください。
擬似要素を変化させるhoverも参考として紹介します。 続きを見る
【CSS】知っていると便利 :hoverで擬似要素だけ変化させる方法