При наведении курсора на #div должна одна картинка скрыться, другая появиться. Однако, ничего не происходит. Что я упустил в коде?
for (var i = 1; i <= 6; i++) {
$('#div' + i).mouseover(function() {
for (var j = 1; j <= 6; j++) {
$('#iconD' + j).prop('hidden', true);
$('#iconL' + j).prop('hidden', false);
}
});
$('#div' + i).mouseout(function() {
for (var j = 1; j <= 6; j++) {
$('#iconD' + j).prop('hidden', false);
$('#iconL' + j).prop('hidden', true);
}
});
}
.div-main {
background-color: #eee;
}
.div-main:hover {
background-color: #ccc;
}
.icon-main img {
margin: 10px;
height: 55px;
width: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="#div1" class="div-main">
<div class="icon-main">
<img id="iconD1" src="https://www.flaticon.com/svg/vstatic/svg/411/411763.svg?token=exp=1615417946~hmac=24cf4527fabe62ec48275f7f27f3d497">
<img id="iconL1" src="https://www.flaticon.com/svg/vstatic/svg/411/411712.svg?token=exp=1615417968~hmac=7d76da248fff4a7b6129ea49a526d3c4" hidden>
</div>
</div>
<div id="#div2" class="div-main">
<div class="icon-main">
<img id="iconD2" src="https://www.flaticon.com/svg/vstatic/svg/2942/2942731.svg?token=exp=1615418181~hmac=726c36528638c57c6e509829863b5f14">
<img id="iconL2" src="https://www.flaticon.com/svg/vstatic/svg/2942/2942807.svg?token=exp=1615418160~hmac=bb73164a99ba229a40012eca0c3377b9" hidden>
</div>
</div>
<div id="#div3" class="div-main">
<div class="icon-main">
<img id="iconD3" src="https://www.flaticon.com/svg/vstatic/svg/2897/2897683.svg?token=exp=1615418200~hmac=505fddf705ed9d799edf67ae93dd3654">
<img id="iconL3" src="https://www.flaticon.com/svg/vstatic/svg/2897/2897818.svg?token=exp=1615418212~hmac=68c328f616e3dcce074243db41a0784e" hidden>
</div>
</div>