こんにちはTERUです。
フリーランスでWEB制作をしています。
プログラミング初学者Aさん
「マウスホバーの使い方について知りたい。」
「Web制作でよく使うマウスホバーを知りたい＆すぐ使いたい。」
本記事では、こういった疑問に答えます。
WEB制作のコーディングでは、マウスホバーを実装することは多いです。
本記事では、マウスホバーの基本的な使い方から、Web制作でよく使うマウスホバーのパターンについてご説明します。
本記事の信頼性
- コーディング歴2年
- WEB制作会社にて、ディレクター経験あり
- 2019年８月〜フリーランスとして制作会社案件を多数経験
マウスホバー(hover)の基本的な使い方。
WEB制作でよく使うマウスホバーの基本的な使い方についてご説明します。
マウスホバーは、要素の上にマウスのポインタを置いたとき実行されるアクションです。
hoverという擬似クラスを利用します。
※WEBページの中では、リンクボタンによく利用されます。
具体例はこちら
ボタンの上にマウスを持ってくると文字と背景の色が反転します。
See the Pen
BajEgby by 三原輝記 (@miharateruki)
on CodePen.
CSSにて、対象要素のクラス名(button)に「:hover」をつけることでマウスポインタを置いた時のアクションを指定することができます。
【コピペ可能】Web制作でよく使うマウスホバーCSS8選
Web制作でよく使うマウスホバーは、ある程度パターンが決まっています。
なぜなら、企業サイトや販売サイトでは、お客様の使いやすさや見やすさを一番に考えて制作するからです。
ここでは、具体的にWeb制作でよく使うマウスホバーを８パターンご説明します。
ボタンリンクでよく使うホバーアクション
ボタン透過
定番のホバーアクションです。
※制作案件で特に指示がない場合、僕はこのパターンを使っています。
See the Pen
LYGvJYM by 三原輝記 (@miharateruki)
on CodePen.
ボタン色反転
ボタンの文字色と背景色を反転するパターンです。これも定番ですね。
See the Pen
BajEgby by 三原輝記 (@miharateruki)
on CodePen.
ボタン背景色変更（動きあり）
マウスホバー時に要素の左右から背景色を変更します。
See the Pen
mdVgqrQ by 三原輝記 (@miharateruki)
on CodePen.
フッター/ヘッダーメニューでよく使うホバーアクション
下線追加（動きあり）
フッターメニューでよく使うホバーアクションです。※（左からと中央から）
See the Pen
bGEJxwB by 三原輝記 (@miharateruki)
on CodePen.
See the Pen
gOPydMa by 三原輝記 (@miharateruki)
on CodePen.
上記２つのコード上の違いは、変形起点を指定する「transform-origin」プロパティを変更しているだけです。
ボタン色＋下線追加（動きあり）
グローバルナビでよく使うホバーアクションです。※（中央からと左から）
See the Pen
wvMbzdz by 三原輝記 (@miharateruki)
on CodePen.
See the Pen
YzwMbdE by 三原輝記 (@miharateruki)
on CodePen.
画像リンクでよく使うホバーアクション
画像拡大
写真にマウスをホバーした際に画像が拡大します。
写真付きカード型の要素によく使うホバーアクションです。
See the Pen
oNbOPvm by 三原輝記 (@miharateruki)
on CodePen.
画像拡大+回転
写真にマウスをホバーした際に画像が拡大＋回転します。
写真付きカード型の要素によく使うホバーアクションです。
See the Pen
VweNdRr by 三原輝記 (@miharateruki)
on CodePen.
画像オーバーレイ
写真にマウスをホバーした際に画像に色を重ねます。
写真付きカード型の要素によく使うホバーアクションです。
See the Pen
vYLMzNo by 三原輝記 (@miharateruki)
on CodePen.
おまけ
マウスホバーを設定する際は、「transition」を設定しましょう。
「transition」は要素に対するアニメーションの遷移時間や遷移の仕方を指定することができます。
マウスホバーで利用するのは下記の記載です。
transition: all 0.3s ease 0s;
hoverのアニメーションを0.3秒かけて行うという指示になります。
※hoverの疑似要素ではない方に指定してください。
これを指定するだけで、フワッとしたアニメーションになり、サイトに柔らかさが出るのでオススメです。
「transition」指定なし
See the Pen
NWxVwLW by 三原輝記 (@miharateruki)
on CodePen.
「transition」指定あり
See the Pen
BajEgby by 三原輝記 (@miharateruki)
on CodePen.
以上がWeb制作でよく使うマウスホバーになります。
まとめ
マウスホバーはサイト制作で、よく使う作業なので一度コーディングしたものは、必ずメモしておきましょう。
次回からテンプレートとして利用できると作業効率も上がります。
本記事に記載したパターンを覚えておけば、大体の制作案件はカバーできると思います。
この記事がプログラミング初学者の参考になれば嬉しいです。
何かご質問がありましたら、気軽にご連絡ください。