CSS WEB制作

【CSS】よく使うhoverテクニック3選 知っておくと便利です

スポンサーリンク

pointer

「:hover」を使ったテクニックを3つ紹介します。

 

ポイント

  • hover設定した要素と異なる要素をアクションさせる方法
  • 擬似要素をアクションさせる方法
  • ボーダーを使ったアニメーション

 

WEB制作において知っておくと大変便利ですので、ぜひ参考にしてください。

 

それではさっそく見ていきましょう。

 

異なる要素をアクションさせる方法

子要素を変化させる

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

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+」としている点です。

 

 

 

擬似要素をアクションさせる方法

「トップへ戻るボタン」をサンプルに紹介します。
「TOP」にhoverすると、縦線が上に動いて、トップへ戻ることを促してくれます。

※トップへスクロールするコードは省略します。

See the Pen
Untitled
by t.h (@tomtom15)
on CodePen.

 

ポイントは

#move:hover::after{

のところです。

 

「:hover」の後ろに「::after」をつけてあげましょう。

これで擬似要素だけが動きます。

 

数値やアクション内容を変えて自分好みにアレンジしちゃってください。

もちろん、擬似要素に before を使用した場合は「::before」になります

 

 

ボーダーを使ったアニメーション

ヘッダーナビゲーションでよく使わています。

See the Pen
Untitled
by t.h (@tomtom15)
on CodePen.

CSSの記載は必要最低限に抑えてますので、余白など足りない部分はアレンジしてください。

CSSには、初心者の人でもわかりやすいように、コメントを入れてます。
不要だったら消しちゃってください。

 

まとめ

いかがでしたでしょうか。

基本的な仕組みさえ抑えておけば応用はきくので、自分なりにアレンジしていくとけっこう楽しいですよ。

hoverをうまく使ってオシャレなWEBサイトを作りましょう。

それではまた。

 

 

 

hoverのエラーも参考として紹介します。

スポンサーリンク

-CSS, WEB制作
-, ,

© 2024 人生フリーハンド Powered by AFFINGER5