--- title: ':hover' slug: 'Web/CSS/:hover' tags: - CSS - Layout - Reference - Web - 疑似クラス translation_of: 'Web/CSS/:hover' ---
{{CSSRef}}

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

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

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

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

構文

{{csssyntax}}

例

基本的な例

HTML

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

CSS

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

a:hover {
  background-color: gold;
}

結果

{{EmbedLiveSample("Basic_example")}}

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

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

仕様策定状況

仕様書 策定状況 コメント
{{ SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }} {{ Spec2('HTML WHATWG') }}  
{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }} {{ Spec2('CSS4 Selectors') }} :hover があらゆる疑似要素に適用できるようになった。
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }} {{ Spec2('CSS3 Selectors') }} 目立った変更はなし。
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }} {{ Spec2('CSS2.1') }} 初回定義。

ブラウザーの対応

{{Compat("css.selectors.hover")}}

関連情報