pointer-events

値の書き方

• auto（初期値）: ふつうどおり、クリックやマウスを乗せた操作を受け取ります。
• none: 要素が無いものとして扱い、後ろにある要素がクリックされます。マウスを乗せたときの :hover やカーソルの形も、後ろの要素のものになります。

プレビューでは、ボタンの右下に重なった黄色い札に書いています。none にすると、札の上からでもボタンの色が変わり、押した回数が増えます。

よく使う場面

一覧の端に重ねたグラデーションや、画像の上に置いた飾りの文字など、見た目のためだけに重ねた要素が、下の要素の操作を邪魔しないようにするときに使います。

気をつけること

• 継承します。none を書いた要素の子も操作を受け取りませんが、子に pointer-events: auto を書けば、その子だけ受け取るように戻せます。
• キーボードの操作は止まりません。none のボタンやリンクにも Tab キーで移動でき、Enter キーで押せます。操作できなくしたいときは、フォームの部品なら disabled 属性、まとめてなら inert 属性を使います。
• visiblePainted・fill・stroke などのキーワードもありますが、SVG の図形のためのもので、HTML の要素での効き方は決まっていません。