備忘録的プログラミングリファレンス

pointer-eventsプロパティ

 pointer-eventsプロパティは、マウスポインターのイベントに反応するか、反応しないかを指定するプロパティです。
 マウスポインターのイベントとはクリックイベントとも呼ばれ、クリックやホバーのことで、クリックやホーバーに反応しないようにできます。

マウスポインターが反応しないように(Exampleを参照
pointer-events: none;

 リンクがあるテキスト上でマウスポインターをホーバーするとリンク用に変わりますが、pointer-events: none;にすると通常のポインターのままです。

構文(Syntax)

CSS

pointer-events: auto | none | initial | inherit;

DOM(JavaScript)

値の取得
String = object.style.pointerEvents;
値の設定
object.style.pointerEvents="auto | none | initial | inherit";

値(Values)

Value摘要
auto初期値(default値)
noneマウスポインターのイベントを無効に
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)auto
継承(Inherited)Yes
CSS AnimationNo

Example

 pointer-eventsの例です。none値でクリックに反応しないようにできます。
 さらに、リンクがあるテキスト上でマウスポインターをホーバーすると通常はリンク用に変わりますが、通常のポインターのままになります。