CSS:疑似要素が重なっていて子要素がクリック出来ないときの対処


公開日:2021.2.27
Pocket

事象としては間々あると思います!

疑似要素でフレームっぽい装飾をしたり、影っぽい装飾をしたい時、
そこに重なっている子要素のテキストやリンクがクリックできない問題。

 

 

基本的に要素が見えないとかクリックできない場合って、重なり順(z-index)を調整すれば直ることが多いんですが

疑似要素をつけた場合、重なり順が絶対に

疑似要素>本体

の順になります。z-indexを使っても無意味だし、本体の子要素も当然疑似要素の下敷きになってなすすべなし。

 

なので、疑似要素で全体を包みたい場合はわざわざそれ用のボックスをひとつ用意する…という無粋なことをやっていたんですが、先日便利なプロパティを発見しました。

 

それが

 

疑似要素に

pointer-events: none;

をつけるという方法。

 

こうすると、被さっている疑似要素にクリック判定がなくなるので
本体の要素達を選択・クリックできるようになります◎

 

いやー先人の知恵に感謝。

Pocket