実行できるCSSドキュメント: CSS ホバー

Q: CSS でホバー効果を付けるには？

セレクタの後に :hover を付けたルールを書きます: .btn:hover { background: #1d4ed8; }。ポインターが要素の上にある間、宣言が適用されます。変化をアニメーションにするには、通常のルールに transition: background 0.2s; を追加します。

Q: :hover と :active の違いは何ですか？

:hover はポインターが要素の上にある間に適用されます。:active は要素が押されている間、つまりマウスボタンを押してから離すまでに適用されます。押されているボタンは、ふつう hover と active の両方の状態にあります。

Q: リンクの疑似クラスはどの順番で書けばいいですか？

:link、:visited、:hover、:active の順です (LVHA、英語では "LoVe HAte" と覚えます)。詳細度が同じなので後のルールが勝ちます。ほかの順番では、visited や hover のスタイルが hover や active のスタイルを隠してしまうことがあります。

Q: CSS でリンクの色を変えるには？

a 要素をスタイルします: a { color: #2563eb; }。ほかの状態には a:visited { color: #7c3aed; } と a:hover { color: #1d4ed8; } を書きます。a に color を指定すれば、未訪問と訪問済みの両方のリンクに効きます。

Q: スマホでも hover は効きますか？

タッチスクリーンには、要素の上に置いたままにできるポインターがありません。ほとんどのモバイルブラウザはタップ時に :hover を適用し、別の場所をタップするまで維持するため、ホバーのスタイルが残ったままになることがあります。ホバーだけの効果は @media (hover: hover) で囲み、大事なコンテンツをホバーの後ろに隠さないでください。

:hover の仕組み

:hover は、マウスポインターが要素の上にある間、その要素に一致する疑似クラスです。任意のセレクタに付けて、ホバー状態のスタイルを書きます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover</title>
  <style>
    .btn {
      background: #2563eb;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
    }
    .btn:hover {
      background: #1d4ed8;
    }
  </style>
</head>
<body>
  <button class="btn">Hover me</button>
</body>
</html>

変わるのは :hover ルールの宣言だけで、それ以外は .btn から引き継がれます。ポインターが離れると、要素は通常のスタイルに戻ります。

transition でなめらかなホバー効果

通常の ルール (:hover ルールではなく) に transition を追加しない限り、ホバーの変化は一瞬で切り替わります。通常のルールに書けば、入るときも出るときもアニメーションします:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover transition</title>
  <style>
    .card {
      width: 220px;
      padding: 16px;
      border: 2px solid #e5e7eb;
      border-radius: 10px;
      background: white;
      transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    }
    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(17, 24, 39, 0.15);
      border-color: #2563eb;
    }
  </style>
</head>
<body>
  <div class="card">Hover the card: it lifts, gains a shadow and a blue border.</div>
</body>
</html>

アニメーションさせるのにいちばん軽いプロパティは transform と opacity です。周りの要素を動かしません。width、height、margin をアニメーションさせると、フレームごとにページのリフローが起きます。所要時間、遅延、イージングは CSS transition のページで解説しています。

リンクの色: :link、:visited、:hover、:active

リンクには昔からの 4 つの状態と、キーボードフォーカスがあります。ルールの順番が重要です:

疑似クラス	適用される条件
`:link`	まだ訪問していないリンク
`:visited`	URL がブラウザの履歴にある
`:hover`	ポインターが上にある
`:active`	押されている
`:focus-visible`	キーボードでフォーカスされている

これらはすべて詳細度が同じなので、2 つが一致したときは後のルールが勝ちます。訪問済みのリンクにホバーすると :visited と :hover の両方に一致し、:visited が最後にあるとホバーの色は表示されません。安全な順番は Link、Visited、Hover、Active (LVHA) です:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link states</title>
  <style>
    a:link    { color: #2563eb; }
    a:visited { color: #7c3aed; }
    a:hover   { color: #16a34a; text-decoration-thickness: 3px; }
    a:active  { color: #f59e0b; }
    a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <p><a href="https://example.com/never-visited-page">Hover, then press and hold this link</a></p>
</body>
</html>

ページが閲覧履歴を読み取れないよう、ブラウザは :visited で変更できるものを制限しています。効くのは色に関係するプロパティ (color、background-color、border-color、outline-color など少数) だけで、スクリプトからは常に未訪問の値が見えます。

:active: 押されている状態

:active は要素が押されている間に一致します。少し動かすだけで、ボタンに押した手応えが生まれます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Active</title>
  <style>
    .btn {
      background: #16a34a;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      box-shadow: 0 4px 0 #166534;
      transition: transform 0.05s, box-shadow 0.05s;
    }
    .btn:hover { background: #15803d; }
    .btn:active {
      transform: translateY(4px);
      box-shadow: 0 0 0 #166534;
    }
    .btn:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
  </style>
</head>
<body>
  <button class="btn">Press me</button>
</body>
</html>

親要素のホバーで子要素をスタイルする

ホバー状態は、ポインターの下にある要素とそのすべての祖先に属します。そのため .card:hover .title は、カードのどこかにホバーしたときにタイトルをスタイルします。同じ考え方で、隠れた要素を表示することもできます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover parent</title>
  <style>
    .item {
      display: flex;
      justify-content: space-between;
      border: 1px solid #e5e7eb;
      padding: 10px;
      width: 260px;
    }
    .item .actions { opacity: 0; transition: opacity 0.15s; }
    .item:hover .actions,
    .item:focus-within .actions { opacity: 1; }
    .item:hover { background: #eff6ff; }
    .item:hover .name { color: #2563eb; }
  </style>
</head>
<body>
  <div class="item">
    <span class="name">report.pdf</span>
    <span class="actions"><button>Delete</button></span>
  </div>
</body>
</html>

:focus-within の行は重要です。これがないと、Tab キーで Delete ボタンに移動したキーボード利用者は、見えないボタンを押すことになります。ホバーで表示する仕組みには、必ずフォーカスのルールを組み合わせましょう。

タッチスクリーンでのホバー

スマートフォンやタブレットには、要素の上に置いたままにできるポインターがありません。ほとんどのモバイルブラウザは最初のタップで :hover を適用し、別の場所をタップするまで維持するため、ホバーのスタイルが残ったままに見えることがあります。次の 2 つのルールで対処できます:

コンテンツにたどり着く唯一の手段を :hover の後ろに置かない。ホバーで開くメニューは、クリックでも開くようにします。
純粋に装飾的なホバー効果は、本物のホバーができる端末かを確認するメディアクエリで囲みます:

@media (hover: hover) {
  .card:hover { transform: translateY(-4px); }
}

よくある間違い

コロンの前にスペースを入れる。 .btn :hover は「.btn の中でホバーされた要素」という意味です。.btn:hover と書きましょう。
:hover ルールにだけ transition を書く。 入るときはアニメーションしますが、出るときはパッと戻ります。通常のルールに書きましょう。
リンクの順番を間違える。 :link、:visited、:hover、:active の順を守ります。
ホバーだけでフォーカスのスタイルがない。 キーボード利用者は :hover を発生させません。操作できる要素には :focus-visible のスタイルも付けましょう。
別の要素に覆われた要素へのホバー。 見えないオーバーレイ (よくあるのは absolute の疑似要素) がポインターを受け取ってしまうことがあります。オーバーレイに pointer-events: none を指定すれば直ります。

よくある質問

CSS でホバー効果を付けるには？

セレクタの後に :hover を付けたルールを書きます: .btn:hover { background: #1d4ed8; }。ポインターが要素の上にある間、宣言が適用されます。変化をアニメーションにするには、通常のルールに transition: background 0.2s; を追加します。

:hover と :active の違いは何ですか？

:hover はポインターが要素の上にある間に適用されます。:active は要素が押されている間、つまりマウスボタンを押してから離すまでに適用されます。押されているボタンは、ふつう hover と active の両方の状態にあります。

リンクの疑似クラスはどの順番で書けばいいですか？

:link、:visited、:hover、:active の順です (LVHA、英語では "LoVe HAte" と覚えます)。詳細度が同じなので後のルールが勝ちます。ほかの順番では、visited や hover のスタイルが hover や active のスタイルを隠してしまうことがあります。

CSS でリンクの色を変えるには？

a 要素をスタイルします: a { color: #2563eb; }。ほかの状態には a:visited { color: #7c3aed; } と a:hover { color: #1d4ed8; } を書きます。a に color を指定すれば、未訪問と訪問済みの両方のリンクに効きます。

スマホでも hover は効きますか？

タッチスクリーンには、要素の上に置いたままにできるポインターがありません。ほとんどのモバイルブラウザはタップ時に :hover を適用し、別の場所をタップするまで維持するため、ホバーのスタイルが残ったままになることがあります。ホバーだけの効果は @media (hover: hover) で囲み、大事なコンテンツをホバーの後ろに隠さないでください。