WEB制作において、「:hover」は 必ず使うスキルですよね。
その:hoverは、カーソルを乗せた要素に変化を加えること多いと思います。
色を変えたり、ボーダーを出現させたりしますよね。
そんななかで、
「擬似要素だけ変化や動作をつけたい場合はどうやるの?」
と困っている方に、解決方法を紹介します。
サンプルコード
「トップへ戻るボタン」をサンプルに紹介します。
「TOP」にhoverすると、縦線が上に動いて、トップへ戻ることを促してくれます。
※トップへスクロールするコードは省略します。
See the Pen
Untitled by t.h (@tomtom15)
on CodePen.
コードのポイント
ポイントは
#move:hover::before{
のところです。
「:hover」の後ろに「::before」をつけてあげましょう。
これで擬似要素だけが動きます。
あとは、数値や:before要素の内容を変えれば、自分になりにアレンジできます。
もちろん、擬似要素に after を使用した場合は「::after」です。
詳しく知りたい方はこちらもどうぞ。
いろいろな動きをするWEBデザイン
hover関連の記事も紹介しておきます。 続きを見る
【CSS】:hover でボーダーボトムをふわっと出現させるコードを紹介します