Webサイトでは、リンクやボタンにマウスを乗せたときに色が変化する表現をよく見かけます。
このような動きは、CSSの**:hover（ホバー）**を使うことで簡単に実装できます。
色が変わることで「ここはクリックできる」と伝えたり、ユーザーの操作に対して反応を返したりできるのもhoverの役割です。
この記事では、文字色や背景色を変更する基本的な方法から、transitionを使って滑らかに変化させる方法、hoverが効かない場合の確認ポイントまで解説します。
CSSの:hoverとは？
:hoverは、マウスポインターが要素の上に乗っている状態を指定する疑似クラスです。
通常時のCSSとは別にhover時のスタイルを設定することで、ユーザーの操作に合わせて見た目を変化させられます。
:hoverの基本的な書き方
たとえば、通常は黒い文字をhover時にグレーへ変更してみます。
<a class="link" href="#">リンク</a>CSSはこちらです。
.link {
color: #333;
}
.link:hover {
color: #888;
}通常時は.link、マウスを乗せた状態は.link:hoverで指定しています。
基本となる形は、
要素:hover {
/* マウスを乗せたときのCSS */
}です。
通常時とhover時のスタイルを分けて考えると、仕組みが分かりやすくなります。
文字色以外も変更できる
:hoverで変更できるのは文字色だけではありません。
背景色や枠線など、さまざまなCSSプロパティを変更できます。
たとえば次のような使い方があります。
- 文字色を変える
- 背景色を変える
- 枠線の色を変える
- 透明度を変える
- 要素を少し拡大する
ただし、変化をたくさん加えればよいわけではありません。ユーザーが操作したことを自然に認識できる程度の変化でも十分です。
hoverで文字色や背景色を変更する方法
:hoverの基本が分かったら、実際によく使うパターンを見ていきましょう。
特にリンクやボタンでは、文字色や背景色を変える方法が使いやすく、hoverの基本として覚えておくと便利です。
ボタンの背景色を変更する
ボタン風のリンクを作り、hoverしたときに背景色を変更してみます。
<a class="button" href="#">詳しく見る</a>.button {
display: inline-block;
padding: 10px 24px;
color: #fff;
background-color: #333;
}
.button:hover {
background-color: #777;
}通常は濃いグレーですが、マウスを乗せると明るいグレーへ変化します。
背景色だけでなく、
.button:hover {
color: #333;
background-color: #fff;
}のように複数のプロパティを同時に変更することもできます。
通常時とhover時の違いが認識できるようにすることがポイントです。
transitionで色を滑らかに変化させる
そのままでは色が瞬間的に切り替わります。
変化を滑らかにしたい場合は、transitionを追加します。
.button {
display: inline-block;
padding: 10px 24px;
color: #fff;
background-color: #333;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #777;
}0.3sは、変化にかける時間です。
| 指定 | 意味 |
|---|---|
background-color | 変化させるプロパティ |
0.3s | 変化にかける時間 |
ease | 変化の進み方 |
transitionは通常時の要素に指定するのがポイントです。そうすることで、マウスを乗せたときだけでなく、離したときにも滑らかに元の状態へ戻ります。
hoverが効かないときの確認ポイント
CSSを書いたのにhoverが反応しない場合は、:hoverそのものではなく、セレクタやCSSの指定方法に原因があることがあります。
コードを追加していく前に、まず基本的な部分から確認してみましょう。
セレクタの書き方を確認する
よく確認したいのが、:hoverの前に余計なスペースが入っていないかです。
.button:hover {
background-color: #777;
}これは.button自身をhoverしたときの指定です。
一方で、
.button :hover {
background-color: #777;
}とスペースを入れると意味が変わります。
後者は、.buttonの中にある別の要素がhoverされた状態を指定するセレクタになります。
見た目はわずかな違いですが、意図した動作にならない原因になるため注意しましょう。
CSSが上書きされていないか確認する
class名が間違っていないのに色が変わらない場合は、別のCSSによってスタイルが上書きされている可能性もあります。
確認したいポイントは次の通りです。
- HTMLとCSSのclass名が一致しているか
:hoverの位置は正しいか- CSSファイルが読み込まれているか
- より優先度の高いCSSで上書きされていないか
特に既存のテーマやCSSをカスタマイズしている場合は、すでにhover用のスタイルが指定されていることもあります。
まずは対象となる要素に自分のCSSが適用されているかを確認すると原因を探しやすくなります。
hoverを使うときはスマホにも注意する
:hoverは簡単にインタラクションを加えられる便利なCSSですが、使用する環境についても考える必要があります。
特に現在のWebサイトではスマートフォンから閲覧されることも多いため、hoverだけに重要な役割を持たせないことが大切です。
スマホにはマウスホバーがない
PCではマウスポインターをボタンの上に置けますが、一般的なタッチ操作のスマートフォンには同じ操作がありません。
そのため、
「hoverしたときだけ説明文が表示される」
といった設計にすると、タッチ環境では情報へアクセスしにくくなる可能性があります。
hoverは装飾や操作へのフィードバックとして利用し、重要な情報は通常の状態でも分かるようにしておくほうが安全です。
動かしすぎず操作を伝えるために使う
hoverすると大きく拡大したり、色・位置・形が一度に変化したりする表現も作れます。
しかし、CSSで実装できることと、実際に使いやすいことは同じではありません。
たとえば、
- リンクの色が少し変わる
- ボタンの背景色が変わる
- 画像の透明度がわずかに変わる
程度でも、ユーザーへのフィードバックとして十分機能します。
hoverは目立たせるためだけではなく、「この要素は操作できる」と伝えるための表現として考えると、使いどころを判断しやすくなります。
【まとめ】hoverは操作が伝わる変化を意識しよう
CSSでマウスを乗せたときに色を変更したい場合は、:hoverを使用します。
基本となるコードはシンプルです。
.button {
background-color: #333;
}
.button:hover {
background-color: #777;
}さらにtransitionを組み合わせれば、色の変化を滑らかにできます。
ただし、hoverは単なる装飾ではありません。リンクやボタンが操作できることを伝え、ユーザーの操作に対して視覚的な反応を返す役割もあります。
スマートフォンにはPCと同じhover操作がないことも考慮しながら、通常時でも情報や操作方法が伝わるデザインを基本にして使ってみてください。