: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.

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

試してみましょう

: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
# selector-hover
Selectors Level 4
# hover-pseudo

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:hover
<a> element support
Non-standard
All elements support
Non-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Non-standard. Check cross-browser support before using.
See implementation notes.

関連情報