Как изменить элемент при наведении, не трогая остальные?

Question

[Даниил Кочкин]

Есть SVG карта. При наведении на карту, кусочки на ней становились прозрачными, opacity .7 или .8. Однако тот кусочек карты, на который направлен указатель мыши изменяться не должен, что значит, его opacity продолжает оставаться 1. Если переместить указатель на другой кусок, то уже он виден на opacity 1, а предыдущий как и остальные на opacity .7 или .8.

Answer 1

[0xD34F]

.hover {
  opacity: 0.5;
}

const map = document.querySelector('.map svg');
map.addEventListener('mouseover', onHover);
map.addEventListener('mouseout', onHover);

function onHover({ target: t }) {
  this.querySelectorAll('.hover-effect').forEach(n => {
    n.classList.toggle('hover', n !== t && this !== t);
  });
}

Answer 2

[VegasChickiChicki]

Возможна такая логика:
1) Обрабатываем движение курсора по карте
2) Если курсор попал на карту :
2.1) Проходимся циклом по все path - задаем им прозрачность, 0.7 например
2.2) Тому который под курсорм (event.target) - не задаем, а точнее задаем прозрачность 1

//при наведении указателя
document.querySelector('.map').addEventListener('mousemove', (event) => {
    let hoverEffect = document.querySelectorAll('.hover-effect');
    for (let i = 0; i < hoverEffect.length; i++) {
        hoverEffect[i].style.opacity = '0.5';
    }
  event.target.style.opacity = '1';
});

//при убирании указателя
document.querySelector('.map').addEventListener('mouseout', () => {
    let hoverEffect = document.querySelectorAll('.hover-effect');
    for (let i = 0; i < hoverEffect.length; i++) {
        hoverEffect[i].style.opacity = '1';
    }
});

Совсем чуть чуть поменял ваш код - все работает)

Answer 3

[xmoonlight]

Поставить всем опасити 0.7
По hover - ставить 1.
При уводе мыши с карты - всем 1.
При вводе в поле карты - всем 0.7