# pointer-events

> 要素がマウスイベントのターゲットになるかどうかを制御するプロパティです。none、auto、visiblePainted等の値があり、透明なオーバーレイの実装やクリック可能領域の制御に使用されます。

- カテゴリ: インタラクション・UX
- URL: https://www.css-dictionary.com/property/pointer-events/

## 構文

```css
pointer-events: auto | none | visiblePainted | ...
```

## Tailwindでは

- `pointer-events-none` → pointer-events: none
- `pointer-events-auto` → pointer-events: auto

## ブラウザ対応

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

## コード例

### 例1: マウスイベントを無効化

```css
pointer-events: none;
```

### 例2: マウスイベントを有効化（デフォルト）

```css
pointer-events: auto;
```

## TIPS

オーバーレイやローディング状態の制御に便利。

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

pointer-events: noneはクリックを下の要素へ素通しさせる（無効化ではなく透過）点の理解が重要です。オーバーレイ装飾を透過させつつ、中の特定ボタンだけpointer-events: autoで復活させる、という組み合わせ技はAIが自発的に出しにくい定番パターンです。noneの要素はhoverもtitleも効かなくなる点にも注意。

## AIへの依頼文例

- 全画面の装飾オーバーレイの下にあるUIを操作可能にしたい。pointer-eventsのnone/auto組み合わせで実装して

## 関連プロパティ

- [cursor](https://www.css-dictionary.com/property/cursor.md)
- [user-select](https://www.css-dictionary.com/property/user-select.md)