:hover

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

css

/* 「ホバー」状態の <a> 要素を選択します */
a:hover {
  color: orange;
}

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

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

構文

:hover

例

基本的な例

HTML

html

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

CSS

css

a {
  background-color: powderblue;
  transition: background-color .5s;
}

a:hover {
  background-color: gold;
}

結果

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報