Я сейчас заметил что на мобильных то не работает. Я нажимаю и все пропало. Начал думаю и попробовал изменить на click на touchstart и что то не чего

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

// Получаем элемент с классом .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;
  });
});

Но проблема в том что У меня либо на локальном не работает либо на хостинге. Идут ошибки что файлы не найдены. То есть работает либо там либо так вот из за этого

// Создаем URL изображения
  // const url = `url(${window.location.origin}/web/rules/picture/thumbnail_card-${i}.png)`;
  const url = `url(../picture/thumbnail_card-${i}.png)`;

И тут так же

// Возвращаем исходное фоновое изображение, если оно было установлено
    // picCardImg.style.backgroundImage = `url(${window.location.origin}/web/rules/picture/thumbnail_card_front.png)`;
    picCardImg.style.backgroundImage = `url(../picture/thumbnail_card_front.png)`;

вот первый url это для хостинга а второй это для локалки.

И работаю одно комментирую в хостинг гружу другое комментарию, это даже на костыль не похоже, а на какую то инвалидную коляску.

Все проблему решил.