PlusOne Blog

【HTML,CSS】重なっている要素の下の要素のクリックイベントを有効にする方法

前回、ウインドウに表示する位置をナビメニュー考慮して下げる方法を紹介したが、それでは padding で隠れてた(下に配置された)要素のクリックイベントが効かなくなったので、それを解決した備忘録。

 
A要素に「pointer-events: none;」を設定すればOK。

elementA {
 pointer-events: none;
}

ただし、今度は逆にA要素に包括されている要素のクリックイベントが発生しなくなるので、A要素内でクリックイベントが必要な要素に「pointer-events: auto;」を設定する必要がある。
 

pointer-events

auto:
要素は、 pointer-events プロパティが指定されていないときと同様にふるまいます。
none:
要素がポインターイベントの対象になることはありません。
 

 

この記事を読む
記事一覧に戻る