js mouseover slider

arkadaşlar 4 adet resim var bunları üzerine gelince büyük resimin değişmesini istiyorum fakat bir yerde yanlışım var

büyük görseller

<div id="slider">
<div id="kucukslaytt1" class="slayt kuccukslayt"><img src="https://unsplash.it/600/300?image=5"></div>
<div id="kucukslaytt2" class="slayt"><img src="https://unsplash.it/600/300?image=4"></div>
<div id="kucukslaytt3" class="slayt"><img src="https://unsplash.it/600/300?image=2"></div>
<div id="kucukslaytt4" class="slayt"><img src="https://unsplash.it/600/300?image=3"></div>
</div>

alttaki kodlar küçük resimler

<div id="kucuk-slider">
<table>
<tr>
<td><a href="#kucukslaytt1"><img class="kucuk-slider-img" src="https://unsplash.it/600/300?image=5"></a></td>
<td><a href="#kucukslaytt2"><img class="kucuk-slider-img" src="https://unsplash.it/600/300?image=4"></a></td>
<td><a href="#kucukslaytt3"><img class="kucuk-slider-img" src="https://unsplash.it/600/300?image=2"></a></td>
<td><a href="#kucukslaytt4"><img class="kucuk-slider-img" src="https://unsplash.it/600/300?image=3"></a></td>
</tr>
</table>
</div>

buda js kodlarım

$(document).ready(function() {
$("#kucuk-slider a").onmouseover(function(eventSlider) {
eventSlider.preventDefault();
$(this).parent().addClass("kuccukslayt");
$(this).parent().siblings().removeClass("kuccukslayt");
var kucukslaytt = $(this).attr("href");
$(".slayt").not(kucukslaytt);
$(kucukslaytt).fadeIn();
});
        });

küçük resimini üzerine geldiğimde görüntüde herhangi bir değişiklik yok

document.querySelectorAll(‘kucukresim’).forEach( item => {
item.addEventListener(‘mouseenter’, e => {
document.querySelector(‘buyukresim’).setAttribut e(‘src’, e.currentTarget.getAttribute(‘src’);
});
});;


Mobilden anca bu kadar