hoverの指定方法を確認したい
CSSのhoverが効かない
hoverのサンプルコードを見たい
CSSのhoverはボタンやリンクで多く取り入れられており、習得すると、デザイン性の向上やユーザー体験の改善、コーディングスキルの向上にも繋がります。
本記事では、CSSのhoverの基本的な使い方からホバーアニメーションの事例も合わせて紹介します。
CSSのhoverとは？
CSSのhoverは、マウスを要素の上に重ねたときに動きをつけられる疑似クラスの一つです。
要素の外見や動作に変化をつけ加えられて、このマウスを重ねる動きは、「マウスホバー」と呼ばれています。
ボタンやメニューリンク、画像などに多く利用されています。
擬似クラスとは？
ユーザーの操作や要素の状態でスタイルを変化させる特別なセレクタ。適切に活用すると、Webサイトのユーザー体験が向上する。
基本的なhoverの使い方
コピー<div class="demo">
<a href="#" class="btn"> ボタン </a>
</div>
コピー.demo {
margin-top: 100px;
margin-left: 100px;
margin-bottom: 100px;
}
.btn {
display: inline-block;
background-color: #f08080;
color: #fff;
font-weight: bold;
padding: 12px 24px;
border-radius: 10px;
transition: background-color 0.3s, color 0.3s, border 0.3s;
}
/* ホバー時のスタイル */
.btn:hover {
background-color: #fff;
color: #f08080;
border: solid 2px #f08080;
opacity: 0.5;
}
hoverの使い方のポイントは、以下の通りです。
- 動きをつけたいクラスに「:hover」をつける
- hoverにはマウスホバー後の動作を指定する
- 滑らかに変化させるために「transition」を使う
今回はボタンのbtnクラスに動きをつけるため「btn:hover」と指定しています。
実務でホバーの動きの指示がない場合は、背景を透過させておけば問題ありません。
マウスホバーしたときに、要素が変化しても滑らかな動きになるように「transition」を使うのがおすすめです。
ホバー前後で滑らかな動きを実現するために、対象の要素にtransitionを指定します。
突然のスタイル変更は、不自然でぎこちない印象を与えるからです。
また、transitionを指定するときは、「transition: background-color 0.3s, color 0.3s, border 0.3s;」のように秒数を揃えましょう。
CSSのhoverアニメーション5選
hoverアニメーションのデザイン例を紹介します。
- 文字色が変わる
- ボーダーが拡張する
- 拡大縮小する
- シャドウが付加される
- ボタンの矢印が右に移動する
それぞれ順番に見ていきましょう。
文字色が変わる
コピー<div class="demo">
<a href="#" class="hover-text">文字色が変わる</a>
</div>
コピー.hover-text {
font-weight: bold;
transition: color 0.3s;
}
.hover-text:hover {
color: #f08080;
}
マウスホバーで文字色が変わるアニメーションです。
transitionでcolorを指定して0.3秒かけて色が変化するようにし、マウスホバー後にピンクに変わるようにhoverを当てています。
ボーダーが拡張する
コピー<div class="demo">
<a href="#" class="hover-border">拡張する</a>
</div>
コピー.hover-border {
display: inline-block;
background-color: #fff;
color: #3498db;
border: 2px solid #3498db;
padding: 10px 20px;
transition: border-width 0.3s;
}
.hover-border:hover {
border-width: 4px;
}
マウスホバーしたときにボタンのボーダー（枠線）の幅が広がるアニメーションです。
hover-borderクラスにhoverを指定して、マウスが重なったときにボーダー幅を4pxに拡大しています。
transitionをhover-borderクラスに当てて、ボーダーの幅が瞬時に変化せず、自然な拡張を実現します。
拡大縮小する
コピー<div class="demo">
<a href="#" class="hover-scale">拡大縮小</a>
</div>
コピー.hover-scale {
display: inline-block;
background-color: #3498db;
color: #fff;
padding: 20px 40px;
text-align: center;
transition: transform 0.3s;
}
.hover-scale:hover {
transform: scale(1.1);
}
マウスホバーしたときに、要素が拡大するアニメーションです。
hover-scaleクラスにdisplay: inline-block;を指定すると、要素のサイズが内容に応じて適切に縮小され、ホバーしたときに拡大する動きが見えるようになります。
hover-scale:hoverでは、transformプロパティでscaleを使い、要素が1.1倍になるように指定しています。
シャドウが付加される
コピー<div class="demo">
<a href="#" class="hover-shadow">シャドウ</a>
</div>
コピー.hover-shadow {
display: inline-block;
background-color: #fff;
padding: 20px 40px;
border: 1px solid #ccc;
text-align: center;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
transition: box-shadow 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
要素にマウスを乗せると、影がスムーズに現れるアニメーションです。
hover-shadowクラスにbox-shadow: 0 0 0 rgba(0, 0, 0, 0);を指定し、初期状態では影がない状態にしておきます。
コードを記述しなくても同様の見た目になりますが、ブラウザの初期スタイルやリセットCSSの影響を防ぐため、設定しておくと安心です。
hover-shadow:hoverにbox-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);を当てて、影を表示しています。
ボタンの矢印が右に移動する
コピー<div class="demo">
<a href="#" class="hover-arrow">右に動く</a>
</div>
コピー.hover-arrow {
display: inline-block;
background-color: #3498db;
color: #fff;
font-weight: bold;
padding: 20px;
width: 200px;
overflow: hidden;
transition: background-color 0.3s;
border-radius: 50px;
text-align: center;
position: relative;
}
.hover-arrow::before {
background-image: url(/img/arrow.png);
width: 25px;
background-repeat: no-repeat;
background-size: contain;
bottom: 0;
content: "";
height: 25px;
margin: auto;
position: absolute;
top: 0;
right: 30px;
transition: right 0.5s;
}
.hover-arrow:hover::before {
right: 25px;
}
マウスホバーしたときに矢印が右に移動するアニメーションです。
hover-arrowクラスにposition: relative;を指定して、矢印の位置調整をします。
また、overflow: hidden;を当てることで、::before疑似要素の矢印がスライドしてもボタンの中に収まるように指定します。
hover-arrow::beforeクラスでは、矢印を背景画像として設定しました。
マウスホバーしたときの動きはhover-arrow:hover::beforeクラスで指定しており、右端へ30pxから25px変化します。
CSSのhoverのタッチデバイスでの対応方法
スマホやタブレットなどのタッチデバイスでは、ホバースタイルが意図せずに適用され、ユーザー体験を損なう可能性があります。
このような問題を防ぐために、マウス操作時のみにホバースタイルが適用されるよう、メディアクエリで指定する方法があります。
コピー@media (hover: hover) {
/* ホバー可能なデバイス向けのスタイル */
a:hover {
background-color: #3498db;
color: #fff;
}
}
上記のようにメディアクエリで指定すると、マウス操作が可能なデバイスだけで、リンクにホバースタイルが適用されます。
ウィンドウ幅でのメディアクエリの設定は、パソコンの幅が狭い場合や、幅の広いタブレットなどで誤判定を招く可能性があり推奨されていないため、注意しましょう。
CSSのhoverが効かないときの5つの対処法
CSSのhoverが効かないときは、以下をチェックしてみましょう。
- セレクタと疑似クラスの記述ミス
- スタイルの優先順位と指定順序
- z-indexの確認
- キャッシュのクリア
- タッチデバイスでの挙動
これら5つを順番に確認すると、hoverが効かない原因を特定できるでしょう。
1.セレクタと疑似クラスの記述ミス
記述の仕方が少しでも異なると、意図した動きになりません。
たとえば、linkにhoverを指定する場合に「.link:hover」と指定したつもりでも「.link :hover」と間に空白が入ってしまうと期待した動作はしません。
他にも、::beforeや::afterなどの疑似要素と組み合わせてhoverを使用するときにも指定する順番が違うと動作しないため、注意が必要です。
2.スタイルの優先順位と指定順序
スタイルの優先順位や指定順序が決まっているため、指定する順番が影響します。
たとえば、hoverとvisitedを使用していてhoverが効かないときは、hoverをvisitedのあとに記述するとスタイルが適用されるようになります。
適切な順番でスタイルを指定できるように、すぐに確認できるようコードストックなどしておくと安心です。
3.z-indexの確認
要素の重なりが原因で上手く表示されない場合があります。
たとえば、position: absolute;を使用しているときに、ホバーしたいものの上に重なっているとhoverが適用されません。
表示順序を確認しなおして、z-indexを適切に設定しましょう。
4.キャッシュのクリア
ブラウザが古いCSSをキャッシュしているときは、最新の更新が反映されない場合があります。
少し時間をおいてからキャッシュをクリアして再読み込みしてみましょう。
5.タッチデバイスでの挙動
スマホやタブレットなどのタッチデバイスでは、hoverが期待通りに挙動しない場合があります。
このような場合は、タッチデバイス向けにメディアクエリで設定すると解決できます。
前章の「CSSのhoverのタッチデバイスでの対応方法」を試してみてください。
まとめ：CSSのhoverで魅力的な動きを実装しよう
CSSのhoverは、ボタンやリンクに簡単な動きをつけられます。
使い方は「:hover」を指定し、滑らかな動きを加えるために「transition」を活用するのがポイントです。
さらに、文字色の変更やボーダー拡張、拡大縮小などのアニメーションを組み込むことで、視覚的に魅力的な効果が得られます。
デイトラWeb制作コースでは、実践的なカリキュラムを通じて効率的に学べるほか、現役エンジニアからの課題添削や質問できる環境が整っています。
さらにスキルアップを目指すなら、デイトラWeb制作コースがおすすめです。
未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ！
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptの言語の基本はもちろん、デザインカンプからのコーディング、WordPressのオリジナルテーマ作成までカリキュラムに含まれています。
さらに、中級・上級の最終課題はメンターによる課題レビューがあります。現場目線の品質チェックが受けられるため、大幅なスキルアップが期待できるでしょう。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！