Показать сообщение отдельно
  #8 (permalink)  
Старый 15.11.2018, 16:19
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 641

мои 5 копеек )
<style>
  /* debug purpose */
  .item-slider-item {
    width: 30px;
    height: 30px;
    border: 1px solid #000;
  }
</style>
<li class="item-slider-item" data-destination="1" data-mouseover="/2.jpg" data-mouseout="/1.jpg"></li>
<img id="1" src="/1.jpg" />
<li class="item-slider-item" data-destination="2" data-mouseover="/4.jpg" data-mouseout="/3.jpg"></li>
<img id="2" src="/3.jpg" />
<script>
  document.querySelectorAll('.item-slider-item').forEach(item => {
    item.addEventListener('mouseover', function (e) {
      document.getElementById(e.target.dataset.destination).src = e.target.dataset.mouseover
    })
    item.addEventListener('mouseout', function (e) {
      document.getElementById(e.target.dataset.destination).src = e.target.dataset.mouseout
    })
  })
</script>
Ответить с цитированием