: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.
Please take two minutes to fill out our short survey.
: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 class="joinBtn">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 |