: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>クエストに参加しますか？</p>
<button class="joinBtn">確認</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 |