pointer-events

インタラクション・UX

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

構文

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

コード例

1

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

マウスイベントを無効化

2

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

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

💡 TIPS

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

関連プロパティ

ブラウザサポート

IE11+, 全モダンブラウザ