MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

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

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

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

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

構文

:hover

基本的な例

HTML

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

CSS

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

a:hover {
  background-color: gold;
}

結果

画像ギャラリー

:hover 疑似クラスを使用して、サムネイルの上をマウスが通過したときだけフルサイズに画像が表示される画像ギャラリーを作成することができます。実行できるものとして、このデモを参照してください。

メモ: :checked 疑似クラスを(隠れたラジオボタンに適用して)使用した同様の効果の例として、 :checked のリファレンスページから取ったこのデモも参照してください。

仕様書

仕様書 策定状況 コメント
HTML Living Standard
:hover の定義
現行の標準  
Selectors Level 4
:hover の定義
草案 :hover があらゆる疑似要素に適用できるようになった。
Selectors Level 3
:hover の定義
勧告 目立った変更はなし。
CSS Level 2 (Revision 1)
:hover の定義
勧告 初回定義。

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本サポート1 有り1442
<a> element support1 有り1442
All elements support1 有り2173 472
Pseudo-element support ? 有り28 ? ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本サポート ? ? 有り ? ? 有り1 ?
<a> element support ? ? ? ? ? ? ?
All elements support ? ? ? ? ? ? ?
Pseudo-element support ? ? ? ? ? ? ?

1. As of Safari for iOS 7.1.2, tapping a clickable element causes the element to enter the :hover state. The element will remain in the :hover state until a different element has entered the :hover state.

2. In Edge, hovering over an element and then scrolling up or down without moving the pointer will leave the element in the :hover state until the pointer is moved. See bug 5381673.

3. In Internet Explorer 8 to Internet Explorer 11, hovering over an element and then scrolling up or down without moving the pointer will leave the element in the :hover state until the pointer is moved. See bug 926665.

4. In Internet Explorer 9 (and possibly earlier), if a <table> has a parent with a non-auto width, overflow-x: auto;, the <table> has enough content to horizontally overflow its parent, and there are :hover styles set on elements within the table, then hovering over said elements will cause the <table>'s height to increase. See a live demo that triggers the bug. One workaround for the bug is to set min-height: 0%; (the % unit must be specified, since unitless and px don't work) on the <table>'s parent element.

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: mfuji09, ethertank, sosleepy
 最終更新者: mfuji09,