javascript - 点击元素方式的图片

Question

我正在制作一个可点击的 map ，其中包含一些突出的部分。参见下图。

map 是一个 SVG 代码，带有背景(深色 map )、每个 map block 都是彩色的(图像)和红色覆盖层(路径)。格式的简单版本如下:

<image src="background" />

<image class="overlay" src="piece1" />
<path class="wijk"></path>

<image class="overlay" src="piece2" />
<path class="wijk"></path>

<image class="overlay" src="piece3" />
<path class="wijk"></path>

<image class="overlay" src="piece4" />
<path class="wijk"></path>

我想要的是，每次您单击 .wijk 元素时，它都会显示，但如果您单击另一个元素，则一个会显示，另一个会再次隐藏。这是我的 Jquery 代码:

$(document).ready(function () {
    $(".wijk").fadeTo(1,0);
    $('.wijk').click(function() {
        $('.wijk').not(this).each(function(){
            $(this).fadeTo(1,0);
        });
        $(this).fadeTo(1,0.3);
    });
});

这里的问题是 img 元素导致无法单击正确的元素。他们就在它前面。我尝试指定 z-index 但没有帮助。

此时，某些 map 片段可以正常工作，而其他 map 片段我必须单击一个特定位置才能使其工作。

请帮忙!

Answer 1

您可以设置 pointer-events将您不希望可点击的图像上的 CSS 属性设置为 none。这将允许点击有效地“传递”到其后面的元素。

svg image.overlay {
  pointer-events: none;
}