概要
例えば日本地図のイメージマップをつくって、クリックするとツールチップを表示させたい。でもツールチップとイメージマップを繋ぐ線に透過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
今回は上記の記事を参考にさせていただきました!