要素がマウスイベントのターゲットになるかどうかを制御するプロパティです。none、auto、visiblePainted等の値があり、透明なオーバーレイの実装やクリック可能領域の制御に使用されます。
pointer-events: auto | none | visiblePainted | ...| pointer-events-none | pointer-events: none |
| pointer-events-auto | pointer-events: auto |
pointer-events: none;マウスイベントを無効化
pointer-events: auto;マウスイベントを有効化(デフォルト)
オーバーレイやローディング状態の制御に便利。
pointer-events: noneはクリックを下の要素へ素通しさせる(無効化ではなく透過)点の理解が重要です。オーバーレイ装飾を透過させつつ、中の特定ボタンだけpointer-events: autoで復活させる、という組み合わせ技はAIが自発的に出しにくい定番パターンです。noneの要素はhoverもtitleも効かなくなる点にも注意。
全画面の装飾オーバーレイの下にあるUIを操作可能にしたい。pointer-eventsのnone/auto組み合わせで実装して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。