:hover
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
:hover
は CSS の擬似クラスで、ユーザーがポインティングデバイスで要素に反応したものの、アクティブ化する必要がないものを選択します。普通はユーザーがカーソル(マウスポインター)を要素の上にかざしたときにそうなります。
試してみましょう
:hover
擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス (:link
、:visited
、:active
) によって上書きされます。適切にリンクにスタイルを適用するには、 :hover
の規則を :link
と :visited
の後、 :active
の前に置き、 LVHA 順: :link
— :visited
— :hover
— :active
で定義されるようにしてください。
メモ: :hover
擬似クラスはタッチ画面で問題になります。ブラウザーによっては、 :hover
擬似クラスに全く一致しなかったり、要素をタッチした直後だけ一致したり、ユーザーが指を離しても一致し続け、他の要素にタッチするまで続いたりします。ウェブの開発者は、ホバー機能が制限されていたり存在しなかったりしても、コンテンツにアクセスできるように考慮してください。
構文
:hover {
/* ... */
}
例
基本的な例
HTML
<a href="#">このリンクの上を通過させてみてください。</a>
CSS
a {
background-color: powderblue;
transition: background-color 0.5s;
}
a:hover {
background-color: gold;
}
結果
仕様書
Specification |
---|
HTML Standard # selector-hover |
Selectors Level 4 # the-hover-pseudo |
ブラウザーの互換性
BCD tables only load in the browser