ホバー

Hover

web development beginner

マウスポインターなどを要素の上に重ね、クリックせずに反応させる操作や状態のこと。

概要（サマリー）

ホバーとは、マウスポインターなどを要素の上に重ね、クリックせずに反応させる操作や状態のことである。ボタンに触れると色が変わる表示は、押せる場所だと利用者へ伝える小さな案内板の役割を持つ。

ホバーは、リンク、ボタン、カードなどが操作できることを示すために使われる。色、下線、影、カーソルなどを少し変えると、どの要素を選ぼうとしているか理解しやすくなる。

CSSでは:hover疑似クラスでスタイルを指定できる。

.button {
  background: #2563eb;
  color: #ffffff;
}

.button:hover {
  background: #1d4ed8;
}

この例では、ポインターがボタン上にある間だけ背景色が変わる。

ホバー時の見た目の変化は、次の生成ツールでプレビューを動かしながら確認できる。

transitionを使うと、色や位置の変化を滑らかにできる。ただし、長すぎる動きや大きすぎる移動は操作を遅く感じさせるため、補助的な短い演出にとどめるとよい。

スマートフォンには常時表示されるマウスポインターがないため、ホバーだけを前提に重要情報を隠すべきではない。タップ、フォーカス、通常表示でも内容や操作方法がわかる設計が必要である。

キーボード利用者には:focus-visibleなどでフォーカス位置を示す。ホバー時だけ見た目を変えるのではなく、アクセシビリティを考えて複数の操作方法へ対応することが大切である。

AIには「ホバーとキーボードフォーカスの両方で見た目を変える」「タッチ端末でも情報を失わない」のように操作条件を具体的に伝えるとよい。生成されたCSSでは、文字と背景のコントラスト、過度な動き、ホバーしないと操作できない構造になっていないかを確認する必要がある。

違う。ホバーはポインターを重ねた状態であり、クリックはボタンを押して操作を確定する行為である。

十分ではない。タッチ操作やキーボード操作では情報へ到達できない可能性がある。

動きが大きいと、読みづらさや操作のしづらさにつながることがある。目的が伝わる最小限の変化がよい。