Posted at

画像の背面に隠れる要素のクリックを有効にしたい


概要

例えば日本地図のイメージマップをつくって、クリックするとツールチップを表示させたい。でもツールチップとイメージマップを繋ぐ線に透過pngを使っていると、背面にあるタグがクリックできなかったりします。

前面にある要素が邪魔して背面の要素がクリックされない。。

これをなんとかして有効化したい。。

そんな場合でもしっかりプロパティが用意されていました。

今回は自分用の備忘録になりそうです。


解決方法

ズバリpointer-events: none;です。

これを前面要素につけるだけ。z-indexは関係ありません。(かといって取ってしまわないように..スタイルが崩れてしまいます。)


style.scss

.tooltip{

/* {{略}} */
&:after {
content: "";
display: block;
width: 140px;
height: 54px;
background: url($imgurl + "fukidashi.svg") no-repeat center center / contain;
position: absolute;
left: -70px;
bottom: 10px;
pointer-events: none; /* これがポイント */
}
}


あとがき

無理!と思うことは大体できる。。(時間があれば)

と日々感じさせられます😊

〜引用元〜

https://qiita.com/riocampos/items/43b8c47e14d63dc6f6a4

今回は上記の記事を参考にさせていただきました!