[ArtemovK]

Есть следующая картина.

<div class="kartinka">
<img src="1.jpg" data-foto="1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg">
</div>
<script>
  document.querySelectorAll('.kartinka img').forEach(img => {
    let foto = img.dataset.foto.split(", ")
    let current = 0
    let interval
    img.addEventListener('mouseenter', function() {
      console.log('hi')
      interval = setInterval(function() {
        current++
        if (current >= foto.length) {
          current = 0
        }
        img.src = foto[current]
      }, 1000)
    })
    img.addEventListener('mouseleave', function() {
      img.src = foto[0]
      clearInterval(interval)
    })
  })
</script>

А вот как сделать что бы он при наведении на div менял картинки не знаю. Пробовал $('.kartinka').on('mouseleave', function() { но когда этих элементов много то меняет на всех картинках.
понимаю что скорее всего беру не так querySelectorAll но как нужно не пойму.
Спасибо за любой пинок.