`pointer-events:none;` で作る視覚効果

CSSで、視覚的には手前（z-indexが大きい）にあるんだけど、clickやmouseoverに反応しない（他の要素へのイベントを一切妨げない）要素、みたいの作れるんだろうか。画面の特定箇所をハイライトする目的で使いたい。

— piglovesyou (@takamura_so) March 21, 2016

知らなかった。こういうのがある。

  pointer-events:none;

stackoverflow.com

IE11+。全ブラウザが実装してる。使えそうだ。

Can I use... Support tables for HTML5, CSS3, etc

これとSVGを組み合わせると、ユーザーの操作を邪魔せずに、ユーザーの注意をコントロールする視覚効果を作れる。新規ユーザーへのチュートリアルや、入力補助、ヘルプなどに使えそう。

Result タブを選んでみてほしい。ユーザーを注目させるための視覚効果としてスポットを動かしている。