Изображение в виде щелчка по элементу

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, но это не помогло.

На этом этапе некоторые части карты работают правильно, а другие мне нужно щелкнуть в одном конкретном c месте, чтобы они заработали.

Помогите, пожалуйста!

Answer 1

Вы можете установить для свойства pointer-events CSS значение none на изображениях, которые не должны быть кликабельными. Это позволит кликам эффективно «проходить» к элементам позади них.

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