Как передать data-attr только в один блок, куда наведен курсор?

Question

[hello-world-1]

При наведение на какую-либо часть блока, происходит смена изображения через data-атрибуты. Проблема в том, что если я создаю два блока, то изменения изображения происходит одновременно во всех. Нужно, чтобы изменения происходили только там, куда направлен курсор.

Прикладываю пример - https://jsfiddle.net/8Losb702/4/

Answer 1

[0xD34F]

$('.item').on('mouseover', '.dot', function({ delegateTarget: t }) {
  $('.thumb-target', t).attr('src', $(this).attr('data-img'));
  $('.dot', t).removeClass('select').filter(this).addClass('select');
});

или

document.querySelectorAll('.item').forEach(n => {
  n.addEventListener('mouseover', onMouseOver);
});

function onMouseOver({ target: t, currentTarget: ct }) {
  if (t = t.closest('.dot')) {
    ct.querySelector('.thumb-target').src = t.dataset.img;
    ct.querySelectorAll('.dot').forEach(n => {
      n.classList.toggle('select', n === t);
    });
  }
}

Answer 2

[Stalker_RED]

потому что вы ищете элемент просто по классу.
Можно получить текущий элемент на котором сработало событие mouseover из event.target
Затем найти родителя .closest(контейнер), и уже в нем менять изображение.