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 疑似クラスを使用して、サムネイルの上をマウスが通過したときだけフルサイズに画像が表示される画像ギャラリーを作成することができます。実行できるものとして、このデモを参照してください。
仕様策定状況
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| HTML Living Standard :hover の定義 |
現行の標準 | |
| Selectors Level 4 :hover の定義 |
草案 | :hover があらゆる疑似要素に適用できるようになった。 |
| Selectors Level 3 :hover の定義 |
勧告 | 目立った変更はなし。 |
| CSS Level 2 (Revision 1) :hover の定義 |
勧告 | 初回定義。 |
ブラウザーの対応
| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基本対応 | 1 | あり | 1 | 4 | 4 | 2 |
<a> element support | 1 | あり | 1 | 4 | 4 | 2 |
| All elements support | 1 | あり2 | 1 | 73 4 | 7 | 2 |
| Pseudo-element support | ? | あり | 28 | ? | ? | ? |
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung 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.