单击元素方式的图像答案

【问题标题】：Image in the way of clicking element单击元素方式的图像
【发布时间】：2020-09-13 16:47:39
【问题描述】：

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

地图是一个 SVG 代码，带有背景（深色地图）、彩色地图（图像）和红色叠加层（路径）。格式的一个简单版本是这样的：

<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，但没有帮助。

此时，一些地图片段可以正常工作，而其他的我必须点击一个特定的位置才能让它们工作。

请帮忙！

【问题讨论】：

如果需要多次使用背景图片可以用对应的路径裁剪图片
对不起，我忘了改src。我现在编辑了代码。背景在代码中只有一次。

标签： javascript html jquery css svg

【解决方案1】：

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

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

【讨论】：