:hover

擬似クラス

要素にマウスカーソルが乗ったときに適用される擬似クラスです。ボタンやリンクのホバー効果などでよく使われます。

構文

Syntax
:hover { ... }

コード例

1

.btn:hover { background: #3b82f6; color: #fff; }
実行結果
.btn:hover → 背景・文字色変化

ボタンにホバーしたときの色変化

💡 TIPS

インタラクションを強調したい要素に使うと効果的。

⚠️ よくある間違い

タッチデバイスでは:activeや:focusも併用推奨。

関連プロパティ

ブラウザサポート

全ブラウザ対応