Смена картинок по ховеру?

Question

[LolaBola]

Хочу сделать смену картинок по ховеру, работает, но при дублировании контента, если карточка не одна а две или больше одной - то картинки меняются только в одной карточке, а в других не работает. Подскажите что поправить?

document.addEventListener("DOMContentLoaded", () => {

  const bgSwitch =  (e) => {
    const target = e.target || e.targetTouches[0].target;
    document.querySelector(".store-big-image").style.backgroundImage = `url(${target.getAttribute("src")})`;
  }
  document.querySelectorAll(".gallery-icon > img").forEach((img) => {
    img.addEventListener("mouseover", bgSwitch);
    img.addEventListener("touchstart", bgSwitch);
  });
  bgSwitch({target:document.querySelector(".store-big-image > img")});
  
});

Answer 1

[Wispik]

Картинка всегда меняется в первом блоке .store-big-image на странице. Без вёрстки тут сложно ответить, где именно надо заменить картинку, но попытаюсь угадать

target.closest(".store-big-image").style.backgroundImage = `url(${target.getAttribute("src")})`;}

Comments

[LolaBola]

Верно, есть одно большое изображение store-big-image, и рядом маленькие картинки gallery-icon, но работает только в одном месте, если таких карточек несколько, то другие не работают, думаю дело в методе document.querySelector

(работает)
<div class="store-big-image" style="background-image: url();"></div>
<div class="gallery-icon">
	 <img width="200" height="200" src="" class="" alt="">
</div>
<div class="gallery-icon">
	 <img width="200" height="200" src="" class="" alt="">
</div>

(не работает, хотя тоже самое)
<div class="store-big-image" style="background-image: url();"></div>
<div class="gallery-icon">
	 <img width="200" height="200" src="" class="" alt="">
</div>
<div class="gallery-icon">
	 <img width="200" height="200" src="" class="" alt="">
</div>

[Wispik]

LolaBola, document.querySelector находит первый блок. То есть сейчас всё работает, только картинка меняется в самом верхнем блоке. Если будет нормальный пример вёрстки, то я напишу как найти нужный

[Антон Усачев]

А тут точно нужен js?
кодручка.

[Wispik]

Антон Усачев, это вообще не то. Вопрос про то, как менять картинку в одном блоке, при ховере на другой блок, типо фотогалереи