プログラミング

【CSS】:hoverで別要素をアクションさせる方法

スポンサーリンク

pointer

今回は「: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も参考として紹介します。

スポンサーリンク

-プログラミング
-, , , , , , ,

© 2022 サカらいふ Powered by AFFINGER5