:hover

ジャンプ先:
  1. 構文
  2. 例
  3. 仕様策定状況
  4. ブラウザーの対応
  5. 関連情報

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
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 4Opera 完全対応 4Safari 完全対応 2WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS 完全対応 あり
補足
完全対応 あり
補足
補足 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 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 4Opera 完全対応 4Safari 完全対応 2WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
All elements support
非標準
Chrome 完全対応 1Edge 完全対応 あり
補足
完全対応 あり
補足
補足 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 完全対応 1IE 完全対応 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 完全対応 7Safari 完全対応 2WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Pseudo-element supportChrome ? Edge 完全対応 ありFirefox 完全対応 28IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

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

関連情報

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

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