Почему не всегда изменяется изображение в блоке при наведении указателя мыши?

Question

[aliasmark]

При относительно быстром перемещении указателя мыши с одного блока на другой не всегда меняется изображение в целевом блоке.

Если отвести указатель с одного блока куда-либо вне области родительского блока и затем плавно навести обратно на тот же блок или на другой, тогда данный эффект не происходит.

Comments

[Полина]

У вас обработчик event.target указывает на любой элемент, на который наведен курсор. Например, на текст внутри блока, а не на сам блок .motionPlitka

Answer 1

[Полина]

Я бы предложила небольшой рефакторинг, чтоб сделать код более читаемым

// объект с путями к изображениям для нормального и hover состояний чтоб не засорять основной код ссылками
// предполагаю, что в сумме у вас их 6, по 2 на каждый элемент motionPlitka
const imageSources = {
  preim1: {
    normal: "https://i.ibb.co/ZdHgXTm/green.png",
    hover: "https://i.ibb.co/g6mNxm8/white.png"
  },
  preim2: {
    normal: "https://i.postimg.cc/6pKDm5Lq/green2.png",
    hover: "https://i.postimg.cc/2SPBDMy1/white2.png"
  },
  preim3: {
    normal: "https://ltdfoto.ru/images/2024/06/13/green3.png",
    hover: "https://ltdfoto.ru/images/2024/06/13/white3.png"
  }
};

// выносим функцию изменения картинки в зависимости от состояния (normal или hover)
const setImageSrc = (element, state) => {
  // находим элемент <img> внутри элемента motionPlitka, на котором у нас курсор
  const img = element.querySelector("img"); 

  // извлекаем список классов элемента и ищем класс, который есть в imageSources
  // в вашем случае preim1, preim2 или preim3
  const className = [...element.classList].find(cls => imageSources[cls]); 

  // меняем src элемента <img> на значение из объекта imageSources для нужного класса и состояния
  img.src = imageSources[className][state];
};

// получаем все элементы .motionPlitka и добавляем обработчики
document.querySelectorAll(".motionPlitka").forEach(elem => {
  // при наведении мыши вызываем setImageSrc с состоянием hover
  elem.addEventListener('mouseenter', () => setImageSrc(elem, 'hover'));
  // при уходе мыши вызываем setImageSrc с состоянием normal
  elem.addEventListener('mouseleave', () => setImageSrc(elem, 'normal'));
});

Здесь mouseenter и mouseleave срабатывают один раз при входе и выходе мыши из родительского элемента motionPlitka. В вашем варианте обработчики срабатывали на действия с дочерними элемементами тоже

Comments

[aliasmark]

Пасиба, буду изучить, а то я там понаписал... на каждом дочернем элементе "ловил" событие при т.н. всплытии.

[Полина]

aliasmark, можно еще через currentTarget вместо eventTarget сделать. Первый - элемент, на котором висит обработчик, второй может быть дочерним, это — элемент, который инициировал событие. Это заметно со сложным html, когда обработчик навешивается на родителя, но фактически срабатывает на дочернем элементе