CSSのhoverで動きをつける方法【初心者向け】

:hoverとは？ボタンに動きをつけたいあなたへ

「ボタンにマウスを乗せたときに色を変えたい」「カードをホバーしたら浮き上がるようにしたい」——Webサイトを作っていると、こんな動きをつけたくなりますよね。

CSSの :hover（ホバー） を使えば、JavaScriptなしでマウスを乗せたときの変化を作れます。この記事では、:hoverの基本から滑らかなアニメーションの作り方、スマホ対応の注意点まで解説します。

読み終わるころには、ボタン・カード・ナビゲーションなど、よく使うUIパーツにプロっぽい動きをつけられるようになります。

:hoverの基本構文

:hover は 擬似クラス（ぎじクラス） の一つで、「マウスが要素の上にある状態」にスタイルを当てます。

セレクター:hover {
  /* マウスが乗ったときのスタイル */
}

すべてのHTML要素に使えます（ボタン、リンク、div、画像など何でもOK）。

:hoverと:focus、:activeの違い

アクセシビリティのために、:hover で変化をつけるときは :focus にも同じスタイルを当てるのがベストプラクティスです。

タッチデバイスでの:hover問題

スマホやタブレットにはマウスがないため、:hover の挙動が不安定です。タップすると:hoverが「固定」されてしまうことがあります。

/* マウスがあるデバイスだけhoverを適用 */
@media (hover: hover) {
  .btn:hover {
    background-color: #0f766e;
  }
}

@media (hover: hover) を使うと、マウスがあるデバイスだけにhoverスタイルを適用できます。詳しくはCSSメディアクエリの使い方を参照してください。

実践コード例①：ボタンの色変化 + transition

hoverだけだと変化が一瞬で起きてカクカクします。transition を組み合わせると滑らかになります。

.btn {
  background-color: #0d9488;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn:hover,
.btn:focus {
  background-color: #0f766e;
  transform: scale(1.05);
}

.btn:active {
  transform: scale(0.97);
}

ポイントは3つです。

• transition は通常状態（:hoverなし）に書く
• :hover と :focus を両方指定してアクセシビリティ対応
• :active で押した感触を追加

transitionの詳しい使い方はCSSトランジション入門で解説しています。

実践コード例②：カードホバーで画像が拡大するエフェクト

.card {
  border-radius: 12px;
  overflow: hidden; /* はみ出た画像を隠す */
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  transform: translateY(-4px);
}

.card img {
  width: 100%;
  transition: transform 0.3s ease;
}

.card:hover img {
  transform: scale(1.08); /* 画像だけ拡大 */
}

overflow: hidden をカードに指定しておくと、拡大した画像がはみ出ません。影の変化についてはbox-shadowで影をつける方法も参考にしてください。

実践コード例③：ナビゲーションのドロップダウンメニュー

/* HTML構造:
<nav>
  <ul class="nav-list">
    <li class="nav-item">
      メニュー ▼
      <ul class="dropdown">
        <li><a href="#">サブ項目1</a></li>
        <li><a href="#">サブ項目2</a></li>
      </ul>
    </li>
  </ul>
</nav>
*/

.dropdown {
  display: none;
  position: absolute;
  background: white;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 8px 0;
}

.nav-item:hover .dropdown {
  display: block; /* ホバーで表示 */
}

ドロップダウンは:hoverの代表的な使い方です。ただし、キーボード操作にも対応するために:focus-withinも追加するとより良いです。

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  display: block;
}

よくある間違い・注意点

❌ transitionを付け忘れてカクカクする

/* NG: transitionがないと一瞬で変わる */
.btn:hover {
  background-color: #0f766e;
}

/* OK: transitionを通常状態に書く */
.btn {
  transition: background-color 0.3s ease;
}
.btn:hover {
  background-color: #0f766e;
}

❌ :hoverだけで重要な情報を隠す

「ホバーしないと見えない情報」はスマホユーザーやキーボードユーザーがアクセスできません。重要な情報は常に表示し、:hoverは「追加の視覚的フィードバック」として使いましょう。

❌ スマホで:hoverが固定される

前述の @media (hover: hover) で対策するか、:hoverのスタイルが固定されても問題ないデザインにしましょう。

擬似クラス全般について詳しく知りたい場合はCSS擬似クラス完全解説を読んでみてください。

ブラウザ対応状況

:hover はすべてのブラウザで対応しています。@media (hover: hover) もChrome・Safari・Firefox・Edgeの全モダンブラウザで使えます。

hoverを使うときの注意点

スマホやタブレットにはマウスカーソルがありません。そのため、タッチデバイスではhoverの効果が見えないことがあります。hoverだけに頼ったデザインは避けましょう。大事な情報はhoverなしでも見えるようにしておくことが大切です。

また、キーボードで操作する人のために、hoverと一緒にfocusも指定しておくと親切です。focusはTabキーで要素を選んだときに適用されます。hoverとfocusに同じスタイルを当てておけば、マウスでもキーボードでも同じ見た目になります。

まとめ

:hoverはユーザーに「この要素は操作できるよ」と伝える重要なフィードバックです。CSSの基礎を復習したい場合はCSSとは？初心者向け解説に戻って確認しましょう。色の指定方法はCSSで色を指定する方法を参照してください。

関連記事

• CSSトランジション入門 — hoverアニメーションの必須パートナー
• CSS擬似クラス完全解説 — :hover以外の擬似クラスも学ぶ
• CSSアニメーションの作り方 — より複雑なアニメーション
• CSSで色を指定する方法 — hover時の色変更
• CSSメディアクエリの使い方 — タッチデバイス判定