--- title: ':hover' slug: Web/CSS/:hover tags: - CSS - Layout - Pseudo-class - Reference - Selector - Web - 擬似クラス browser-compat: css.selectors.hover translation_of: Web/CSS/:hover ---
{{ CSSRef }}

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

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

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

注: :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', 'semantics-other.html#selector-hover', ':hover') }} WHATWG HTML GitHub issues
{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }} :hover があらゆる擬似要素に適用できるようになった。 CSS Working Group drafts GitHub issues
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }} 初回定義。

ブラウザーの互換性

{{Compat}}

関連情報