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 の定義 |
勧告 | 初回定義。 |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されます。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。