pointer-events

インタラクション・UX

要素がマウスイベントのターゲットになるかどうかを制御するプロパティです。

構文

Syntax

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

pointer-events: none;

実行結果

背景要素

透明オーバーレイ（クリック不可）

マウスイベントを無効化（クリック不可）

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

実行結果

無効化された要素

透明なオーバーレイを作成

.disabled {
  opacity: 0.5;
  pointer-events: none;
}

要素を無効化

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

IE11+, 全モダンブラウザ