# :hover

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

- カテゴリ: 擬似クラス
- URL: https://www.css-dictionary.com/property/pseudo-hover/

## 構文

```css
:hover { ... }
```

## Tailwindでは

- バリアント: `hover:` を先頭に付けて使う
- `hover:bg-red-700` → :hover { background-color: ... }
- 補足: v4のhover:は「ホバー可能なデバイス」でのみ有効（@media (hover: hover)内）。タッチデバイスでの疑似ホバー問題が仕様レベルで解決された。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 1+ / Safari 2+ / Edge 12+

## コード例

### 例1: ボタンホバー時に背景色を変更

```css
button:hover { background-color: blue; }
```

### 例2: リンクホバー時に下線を表示

```css
a:hover { text-decoration: underline; }
```

## TIPS

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

## よくある間違い

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

## AIがよく間違えるポイント

タッチデバイスでは:hoverがタップ後に貼り付く（sticky hover）ため、素の:hoverだけで書くとスマホで不自然になります。AIはこの配慮を省略しがちで、@media (hover: hover)で「ホバーできる環境だけ」に限定するのが現代の定石です。ホバーでしか到達できない情報を作らない（キーボード・タッチ代替）ことも重要です。

## AIへの依頼文例

- このhoverエフェクトをタッチデバイスで貼り付かないよう@media (hover: hover)でガードして

## 関連プロパティ

- [pseudo-has](https://www.css-dictionary.com/property/pseudo-has.md)