pointer-eventsについて

なぜこの記事を書こうと思ったか

業務で画像を随所に散りばめた、position:absoluteを多用するWebサイトを実装することがあり、その際に画像と重なった要素のhoverが効かなくなることがあり、自身では原因がわからなかったため。

pointer-eventsについて

• pointer-eventsには、以下の10個の値が指定できる（キーワード値の場合）
  • auto
  • none
  • visiblePainted
  • visibleFill
  • visibleStroke
  • visible
  • painted
  • fill
  • stroke
  • all

解説

• auto
  • 初期値。pointer-eventsプロパティを指定していない場合と同じ振る舞いをする。
• none
  • 要素はポインターイベントの対象にならない。ただし、子孫要素が別のpointer-eventsプロパティの指定をしている場合には、子孫要素はポインターイベントの対象になり得る。
• 他の値はsvgのみに指定可能な値である。これらは別の機会にこの記事を編集してまとめる。

参考

MDN : https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events