:hover

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。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;
}

結果

[フレーム]

仕様書

仕様書
HTML # selector-hover
Selectors Level 4 # hover-pseudo

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年3月11日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告