CSS辞書

pointer-events

インタラクション・UX

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

構文

Syntax
pointer-events: auto | none | visiblePainted | ...

Tailwindでは

pointer-events-nonepointer-events: none
pointer-events-autopointer-events: auto

コード例

1

pointer-events: none;
実行結果
背景要素
透明オーバーレイ(クリック不可)

マウスイベントを無効化

2

pointer-events: auto;
実行結果
無効化された要素

マウスイベントを有効化(デフォルト)

💡 TIPS

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

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

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

💬 AIへの頼み方

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

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

このプロパティを使ったUIレシピ

ブラウザサポート

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