このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
:hover
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
:hover はCSS の擬似クラスで、ユーザーがポインティングデバイスで要素に反応したものの、アクティブ化する必要がないものを選択します。普通はユーザーがカーソル（マウスポインター）を要素の上にかざしたときにそうなります。
試してみましょう
.joinBtn { width: 10em; height: 5ex; background-color: gold; border: 2px solid firebrick; border-radius: 10px; font-weight: bold; color: black; cursor: pointer;}.joinBtn:hover { background-color: bisque;}<p>Would you like to join our quest?</p><button>Confirm</button>:hover 擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス (:link、:visited、:active) によって上書きされます。適切にリンクにスタイルを適用するには、:hover の規則を:link と:visited の後、:active の前に置き、LVHA 順::link —:visited —:hover —:active で定義されるようにしてください。
メモ::hover 擬似クラスはタッチ画面で問題になります。ブラウザーによっては、:hover 擬似クラスに全く一致しなかったり、要素をタッチした直後だけ一致したり、ユーザーが指を離しても一致し続け、他の要素にタッチするまで続いたりします。ウェブの開発者は、ホバー機能が制限されていたり存在しなかったりしても、コンテンツにアクセスできるように考慮してください。
構文
css
:hover { /* ... */}例
基本的な例
HTML
html
<a href="#">このリンクの上を通過させてみてください。</a>CSS
css
a { background-color: powderblue; transition: background-color 0.5s;}a:hover { background-color: gold;}結果
仕様書
| Specification |
|---|
| HTML # selector-hover |
| Selectors Level 4 # hover-pseudo |