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

今回は「:hover」で別要素をアクションさせる方法を紹介します。

私自身、CSSを学習しはじめたころ、「なるほど」と思ったのでメモ書きとして記事を書きました。

困っている方の参考になれば幸いです。

コード

子要素を変化させる

まずは子要素を変化させるコードです。

See the Pen
hover-action-child by t.h (@tomtom15)
on CodePen.

親要素である青い部分にhoverしてみてください。
子要素の白い部分も青くなります。

ＣＳＳの書き方は、

親要素:hover 子要素{
アクション内容
}

です。

非子要素を変化させる

次は子要素ではない別要素を変化させるコードです。

See the Pen
hover-action-another by t.h (@tomtom15)
on CodePen.

先ほどの子要素を変化させるコードと違う点は

「:hover」→「:hover+」としている点です。

まとめ

いかがでしたでしょうか。
とても簡単ですよね。

私は、ボタンのhoverで矢印を動かして注意を引き付けるために使ったりしています。
これを使ってWEBサイトにちょっとした工夫を入れたり、アレンジして応用してください。

擬似要素を変化させるhoverも参考として紹介します。