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

Question

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

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

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

*{margin:0;padding:0;box-sizing:border-box}
body{display:flex}

.item {
  position:relative;
  display: flex;
  width:200px;
  padding:10px;
  margin-right:10px;
}

.thumb-target {
  width: 200px;
  height: 200px
}

.dots {
  display:flex;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%
}

.dot {
  border-bottom: 4px solid #ffffff;
  cursor: pointer;
  flex-grow: 1;
  height: 100%;
  list-style-type:none
}

.dot.select{background:red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="item">

  <div class="thumbs">
    <img class="thumb-target" src="https://clck.ru/USQPh">
  </div>
  
  <ul class="dots">
    <li class="dot" data-img="https://clck.ru/USQTF"></li>
    <li class="dot" data-img="https://clck.ru/USQUe"></li>
    <li class="dot" data-img="https://clck.ru/USQVs"></li>
  </ul>
  
</div>

<div class="item">

  <div class="thumbs">
    <img class="thumb-target" src="https://clck.ru/USQTF">
  </div>
  
  <ul class="dots">
    <li class="dot" data-img="https://clck.ru/USQPh"></li>
    <li class="dot" data-img="https://clck.ru/USQUe"></li>
    <li class="dot" data-img="https://clck.ru/USQVs"></li>
  </ul>
  
</div>

Answer 1

Вроде так:

$('.item').on('mouseover', '.dot', function() {
    $(this).closest('.item').find('.thumb-target').attr('src', this.dataset.img);
    // или так: $(this).parent().parent().find('.thumb-target').attr('src', this.dataset.img);
    $('.dot').removeClass('select');
    $(this).addClass('select');
});

*{margin:0;padding:0;box-sizing:border-box}
body{display:flex}

.item {
  position:relative;
  display: flex;
  width:200px;
  padding:10px;
  margin-right:10px;
}

.thumb-target {
  width: 200px;
  height: 200px
}

.dots {
  display:flex;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%
}

.dot {
  border-bottom: 4px solid #ffffff;
  cursor: pointer;
  flex-grow: 1;
  height: 100%;
  list-style-type:none
}

.dot.select{background:red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="item">

  <div class="thumbs">
    <img class="thumb-target" src="https://clck.ru/USQPh">
  </div>
  
  <ul class="dots">
    <li class="dot" data-img="https://clck.ru/USQTF"></li>
    <li class="dot" data-img="https://clck.ru/USQUe"></li>
    <li class="dot" data-img="https://clck.ru/USQVs"></li>
  </ul>
  
</div>

<div class="item">

  <div class="thumbs">
    <img class="thumb-target" src="https://clck.ru/USQTF">
  </div>
  
  <ul class="dots">
    <li class="dot" data-img="https://clck.ru/USQPh"></li>
    <li class="dot" data-img="https://clck.ru/USQUe"></li>
    <li class="dot" data-img="https://clck.ru/USQVs"></li>
  </ul>
  
</div>

БЛОГ НА HUSL

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

Ответы (1 шт):