:hover

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 の定義	勧告	初回定義。

ブラウザーの対応

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
`:hover`	Chrome 完全対応 1	Edge 完全対応 12	Firefox 完全対応 1	IE 完全対応 4	Opera 完全対応 4	Safari 完全対応 2	WebView Android 完全対応 37	Chrome Android 完全対応 18	Firefox Android 完全対応 4	Opera Android ?	Safari iOS 完全対応 1 補足完全対応 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.	Samsung Internet Android ?
`<a>` element support 非標準	Chrome 完全対応 1	Edge 完全対応 12	Firefox 完全対応 1	IE 完全対応 4	Opera 完全対応 4	Safari 完全対応 2	WebView Android 完全対応 37	Chrome Android 完全対応 18	Firefox Android 完全対応 4	Opera Android ?	Safari iOS 完全対応 1	Samsung Internet Android ?
All elements support 非標準	Chrome 完全対応 1	Edge 完全対応 12 補足完全対応 12 補足補足 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.	Firefox 完全対応 1	IE 完全対応 7 補足完全対応 7 補足補足 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. 補足 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.	Opera 完全対応 7	Safari 完全対応 2	WebView Android 完全対応 37	Chrome Android 完全対応 18	Firefox Android 完全対応 4	Opera Android ?	Safari iOS 完全対応 1	Samsung Internet Android ?
Pseudo-element support	Chrome 完全対応 1	Edge 完全対応 12	Firefox 完全対応 28	IE 完全対応 11	Opera ?	Safari 完全対応 2	WebView Android 完全対応 ≤37	Chrome Android 完全対応 18	Firefox Android 完全対応 28	Opera Android ?	Safari iOS 完全対応 1	Samsung Internet Android ?

凡例

完全対応: 完全対応
実装状況不明: 実装状況不明
非標準。ブラウザー間の互換性が低い可能性があります。: 非標準。ブラウザー間の互換性が低い可能性があります。
実装ノートを参照してください。: 実装ノートを参照してください。