CSSの `pointer-events: none` が便利

CSSの pointer-events: none が便利

早速書かなくなっているので、小さいことでも書いていこうという気持ちを見せてる💪

サイト作ったりしてて、ディレクターに確認出したりするとたまーに「ここなんかクリックできないんだけど」みたいなことを言われることある。ちょっとややこしいデザインのサイトとかだと割とありがち。
それを聞くと「はーん、レイヤーの順番問題だな」というふうになって、position: relativeかけたりz-indexいじったりすることになるわけなんだけど、pointer-events: noneを利用すれば解消される。

あるいはハンバーガーメニューかなんかで、クリックすると画面全体を覆うようなレイヤーが登場するような場合も使える。
opacity: 0だけだと、透明になってるだけなのでレイヤーがそこに存在し続けて、普通にクリックできる状態になってしまうため、今まではvisibility: hiddenで存在を消してやってたのだけど、アニメーションかける時にちょっとこのプロパティを気遣ってやる必要があって、まぁまぁめんどくさいなと思ってたら、それもpointer-events: noneでいける。

なんで今まで知らんかったんやろうという気持ち。

そういうわけでDEMOです。

See the Pen pointer event test by bom_phage (@bom_phage) on CodePen.

はい。

小ネタでした。