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

概要

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