CSS:hoverでコンテンツを動かしたり表示させたりする


公開日:2021.3.27
Pocket

 

hoverって?

 

hoverというのは、マウスカーソルをあてている動作のことを指します。

実際に見てみたほうが早いと思うので、下記の「ぼたんだよ!」にマウスカーソルをあててみましょう。

文字の色が赤くなったと思います。

このhoverで変わる動きのことをホバーアクションと呼んだりもしますね◎

 

(ちなみに、スマホではhoverはできないのでご注意。
iPhoneでは、1回タップしたらhoverコンテンツが出て、もう1回タップしたらリンク遷移…という処理順みたいです)

 

ホバーアクションの書き方

ホバーアクションを指定するのは簡単で、cssに

:hover{

}

こうやって「:hover」の疑似スタイルを設定するだけ。

aタグにhover時、赤い文字にする!という指定をするなら

a:hover{
 color: red;
}

という感じで書きます。

 

文字色だけでなく、背景色やサイズ移動なんかもできるので、いい感じの動きを付けて動きのあるサイトを作るのに一役買ってくれる機能です★

 

※基本的にホバーアクションは、その要素もしくは兄弟要素、子要素にしか指定できません。
親要素を変化させたい、という場合は js で指定する必要があります。そのうち記事かきます。

 

 

色々なhover

簡単なhoverアクションのサンプルをいくつか置いておきます。

色を変えたり、大きさを変えたり、自分好みのhoverにカスタマイズしてください٩( ”ω” )و

くるっとするとかぬるっとするとかコピペで実装できるタイプの華やかなhoverは…他のブログさんとかを見てね…(他人任せ)

子要素・疑似要素、animation(keyframes)を駆使すると色々な動きが実装できるので、お試しあれ!(人任せ)

 

 

よいホバーライフを!

Pocket