:hover

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

:hover は CSS の擬似クラスで、ユーザーがポインティングデバイスで要素に反応したものの、アクティブ化する必要がないものを選択します。普通はユーザーがカーソル（マウスポインター）を要素の上にかざしたときにそうなります。

試してみましょう

:hover 擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス (:link、:visited、:active) によって上書きされます。適切にリンクにスタイルを適用するには、 :hover の規則を :link と :visited の後、 :active の前に置き、 LVHA 順: :link — :visited — :hover — :active で定義されるようにしてください。

メモ: :hover 擬似クラスはタッチ画面で問題になります。ブラウザーによっては、 :hover 擬似クラスに全く一致しなかったり、要素をタッチした直後だけ一致したり、ユーザーが指を離しても一致し続け、他の要素にタッチするまで続いたりします。ウェブの開発者は、ホバー機能が制限されていたり存在しなかったりしても、コンテンツにアクセスできるように考慮してください。

構文

css
:hover {
  /* ... */
}

例

基本的な例

HTML

html
<a href="#">このリンクの上を通過させてみてください。</a>

CSS

css
a {
  background-color: powderblue;
  transition: background-color 0.5s;
}

a:hover {
  background-color: gold;
}

結果

仕様書

Specification
HTML Standard
# selector-hover
Selectors Level 4
# hover-pseudo

ブラウザーの互換性

BCD tables only load in the browser

関連情報