Mouseover и Mouseout

[Андрей812]

Здравствуйте! Не судите строго. Сделал примитивно, чтобы при наведении на элемент менялась картинка, как сделать чтобы не прописывать onmouseover и onmouseout в самом теге, а прописать функцию. Подскажите, пожалуйста

<li class="item-slider-item" onmouseover="document.getElementById('1').src='/2.jpg'" onmouseout="document.getElementById('1').src='/1.jpg'"></li>
<img id="1" src="/1.jpg"/>
<li class="item-slider-item" onmouseover="document.getElementById('2').src='/4.jpg'" onmouseout="document.getElementById('2').src='/3.jpg'"></li>
<img id="2" src="/3.jpg" />

[j0hnik]

var li = document.querySelectorAll('li');
		li[0].onmouseover = e => document.getElementById('1').src='/2.jpg';
		li[0].onmouseout = e => document.getElementById('1').src='/1.jpg';
		li[1].onmouseover = e => document.getElementById('2').src='/4.jpg';
		li[1].onmouseout = e => document.getElementById('2').src='/3.jpg';

данную конструкцию можно будет сократить

[рони]

Андрей812,
:hover

[Андрей812]

Спасибо!

[Dilettante_Pro]

С hover у меня как-то так получилось... Неизящно.

<style>
li.item-slider-item:nth-child(1):after{ content:url(https://javascript.ru/cat/list/donkey.gif)}
li.item-slider-item:nth-child(1):hover:after{ content:url(https://javascript.ru/cat/list/firefox.gif)}
li.item-slider-item:nth-child(2):after{ content:url(https://javascript.ru/cat/list/jquery_54.png)}
li.item-slider-item:nth-child(2):hover:after{ content:url(https://javascript.ru/cat/list/js.gif)}
</style>
<li class="item-slider-item"></li>
<li class="item-slider-item"></li>

[Dilettante_Pro]

вот так, похоже, лучше.

<style>
</style>
<li class="item-slider-item"></li>
<li class="item-slider-item"></li>
<script>
var styles = '',
images = [['https://javascript.ru/cat/list/donkey.gif','https://javascript.ru/cat/list/firefox.gif'],['https://javascript.ru/cat/list/jquery_54.png','https://javascript.ru/cat/list/js.gif']];
for (var i = 0; i < 2; i++) {
  styles += 'li.item-slider-item:nth-child(' + (i+1) + '):after{ content:url(' + images[i][0] + ')}';
  styles += 'li.item-slider-item:nth-child(' + (i+1) + '):hover:after{ content:url(' + images[i][1] + ')}';
}
document .querySelector('style').innerHTML = styles;
</script>

[рони]

<style>
li.item-slider-item{
    width: 128px;
    height: 128px;
    background-size:  cover;
    background-repeat: no-repeat;
    list-style: none;
    transition: .4s;
     }

li.item-slider-item:nth-child(1){ background-image:url(https://javascript.ru/cat/list/donkey.gif)}
li.item-slider-item:nth-child(1):hover{ background-image:url(https://javascript.ru/cat/list/firefox.gif)}
li.item-slider-item:nth-child(2){ background-image:url(https://javascript.ru/cat/list/jquery_54.png)}
li.item-slider-item:nth-child(2):hover{ background-image:url(https://javascript.ru/cat/list/js.gif)}
</style>
<ul>
<li class="item-slider-item"></li>
<li class="item-slider-item"></li>
</ul>

[SuperZen]

мои 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>