マウスホバーアクションのパターン５選【CSS】
こんにちは！スズキです。
今回はマウスホバーアクションのパターンを5つ紹介します。
マウスホバーアクションとは、カーソルを対象にのせた時に行われるアクションのことです。
カーソルをのせると背景色が半透明になるボタンなどをよく見ると思います。
これらのマウスホバーアクションはCSSで表現できます。
記事の内容
- hoverはtransitionとセットで使う
- パターン1（透過する）
- パターン2（色が反転する）
- パターン3（浮き上がる）
- パターン4（拡大する）
- パターン5（色を変える）
スポンサードサーチ
hoverはtransitionとセットで使う
前提として、今回紹介するマウスホバーアクションは全てhoverとtransitionで表現しています。
transitionを使うことで、hoverに指定したアニメーションを反映させる速度を操作することができます。
transitionがなければ、一瞬でアニメーションが反映されます。
transitionがあれば、もっとゆっくり、など好きなタイミングで反映させることができるのです。
マウスホバーアクションを実装する時は、hoverだけでなくtransitionも指定することを覚えておきましょう。
パターン1（透過する）
まずは透過させるパターンです。
よく見るパターンですね。
スポンサードサーチ
パターン2（色が反転する）
次に色が反転するパターンです。
こちらもよく見ますね。
パターン3（浮き上がる）
次はカーソルを合わせると浮き上がります。
transformを指定することで表現できます。
スポンサードサーチ
パターン4（拡大する）
対象を拡大させます。
こちらもtransformを使います。
scaleで拡大させることができます。
パターン5（色を変える）
最後にテキストの色を変えるパターンです。
スポンサードサーチ
まとめ
いかがでしたか。
どれもCSSだけで表現できました。
hoverとtransitionをセットで使っていきましょう。
以上です。
コーディングを学ぶならデイトラ
動画でプログラミングを学ぶなら
オンラインスクールでプログラミングを学ぶなら