WEB制作

【CSS】知っていると便利 :hoverで擬似要素だけ変化させる方法

スポンサーリンク

hover

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関連の記事も紹介しておきます。



スポンサーリンク

-WEB制作
-, , , , , , , ,

© 2023 WEBセンス Powered by AFFINGER5