[Сергей Ракипов]

Я вот нашел какой решение

// Получаем элемент с классом .pic_card_img
const picCardImg = document.querySelector(".pic_card_img");
// Получаем все элементы с id, начинающимся с 'explanation_card-'
const explanationCards = document.querySelectorAll('[id^="explanation_card-"]');
// Перебираем каждый элемент
explanationCards.forEach((o, i) => {
  // Создаем URL изображения
  // const url = `url(${window.location.origin}/web/rules/picture/thumbnail_card-${i}.png)`;
  const url = `url(../picture/thumbnail_card-${i}.png)`;
  // Добавляем обработчик события наведения на элемент
  o.addEventListener("mouseenter", () => {
    // Устанавливаем фоновое изображение для элемента picCardImg
    picCardImg.style.backgroundImage = url;
  });
  // Добавляем обработчик события ухода с элемента
  o.addEventListener("mouseleave", () => {
    // Возвращаем исходное фоновое изображение, если оно было установлено
    // picCardImg.style.backgroundImage = `url(${window.location.origin}/web/rules/picture/thumbnail_card_front.png)`;
    picCardImg.style.backgroundImage = `url(../picture/thumbnail_card_front.png)`;
  });
  // Обработчик для касания на мобильных устройствах
  o.addEventListener("touchstart", () => {
    // Устанавливаем фоновое изображение для элемента picCardImg
    picCardImg.style.backgroundImage = url;
  });
});