javascript - 单击元素方式的图像

Question

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

该地图是带有背景（深色地图）、彩色地图（图像）和红色叠加层（路径）的 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 但这没有帮助。

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

请帮忙！

标签： javascripthtmljquerycsssvg

Answer 1

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

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