mouseover и mouseout в цикле for JS

Question

При наведении курсора на #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>

Answer 1

Не ответ на вопрос, а скорее предложение. Может тут вообще не стоит использовать JS?

Первый пример который не подошел.

.div-main {
  background-color: #eee;
}

.div-main:hover {
  background-color: #ccc;
}

.icon-main img {
  margin: 10px;
  height: 55px;
  width: auto;
}

.icon-main:hover img[img-default] {
  opacity: 0;
}

.icon-main img[img-hidden] {
  opacity: 0;
}

.icon-main:hover img[img-hidden] {
  opacity: 1;
}

<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-default>
    <img id="iconL2" src="https://www.flaticon.com/svg/vstatic/svg/2942/2942807.svg?token=exp=1615418160~hmac=bb73164a99ba229a40012eca0c3377b9" img-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-default>
    <img id="iconL3" src="https://www.flaticon.com/svg/vstatic/svg/2897/2897818.svg?token=exp=1615418212~hmac=68c328f616e3dcce074243db41a0784e" img-hidden>
  </div>
</div>

Вариант с вашим j <= 6 - здесь только CSS

.div-main {
  background-color: #eee;
}

.div-main:hover {
  background-color: #ccc;
}

.icon-main img {
  margin: 10px;
  height: 55px;
  width: auto;
}

.icon-main-gl:hover img[img-default] {
  opacity: 0;
}

.icon-main-gl img[img-hidden] {
  opacity: 0;
}

.icon-main-gl:hover img[img-hidden] {
  opacity: 1;
}

<div class="icon-main-gl">
  <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-default>
      <img id="iconL2" src="https://www.flaticon.com/svg/vstatic/svg/2942/2942807.svg?token=exp=1615418160~hmac=bb73164a99ba229a40012eca0c3377b9" img-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-default>
      <img id="iconL3" src="https://www.flaticon.com/svg/vstatic/svg/2897/2897818.svg?token=exp=1615418212~hmac=68c328f616e3dcce074243db41a0784e" img-hidden>
    </div>
  </div>
</div>

UPDATE: Пример из коммента(на сайте) используя JS. Никакие id не надо.

const firstIcon = document.querySelectorAll('.icon-main>img:first-child')
const lastIcon = document.querySelectorAll('.icon-main>img:last-child')
document.querySelectorAll('.icon-main').forEach((e) => {
  e.addEventListener('mouseenter', () => {
    firstIcon.forEach((i) => i.hidden = true)
    lastIcon.forEach((i) => i.hidden = false)
  })
  e.addEventListener('mouseleave', () => {
    firstIcon.forEach((i) => i.hidden = false)
    lastIcon.forEach((i) => i.hidden = true)
  })
})

.div-main {
  background-color: #eee;
}

.div-main:hover {
  background-color: #ccc;
}

.icon-main img {
  margin: 10px;
  height: 55px;
  width: auto;
}

<div class="div-main">
  <div class="icon-main">
    <img src="https://www.flaticon.com/svg/vstatic/svg/2942/2942731.svg?token=exp=1615418181~hmac=726c36528638c57c6e509829863b5f14">
    <img src="https://www.flaticon.com/svg/vstatic/svg/2942/2942807.svg?token=exp=1615418160~hmac=bb73164a99ba229a40012eca0c3377b9" hidden>
  </div>
</div>
<div class="div-main">
  <div class="icon-main">
    <img src="https://www.flaticon.com/svg/vstatic/svg/2897/2897683.svg?token=exp=1615418200~hmac=505fddf705ed9d799edf67ae93dd3654">
    <img src="https://www.flaticon.com/svg/vstatic/svg/2897/2897818.svg?token=exp=1615418212~hmac=68c328f616e3dcce074243db41a0784e" hidden>
  </div>

Answer 2

В итоге сделал так (спасибо @AlexanderLonberg):

.div-main {
  background-color: #eee;
}

.div-main:hover {
  background-color: #ccc;
}

.icon-main img {
  padding: 10px;
  height: 55px;
  width: auto;
}

.div-main:hover img[img-default] {
  display: none;
}

.div-main img[img-hidden] {
  display: none;
}

.div-main:hover img[img-hidden] {
  display: block;
}

<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-default>
    <img id="iconL2" src="https://www.flaticon.com/svg/vstatic/svg/2942/2942807.svg?token=exp=1615418160~hmac=bb73164a99ba229a40012eca0c3377b9" img-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-default>
    <img id="iconL3" src="https://www.flaticon.com/svg/vstatic/svg/2897/2897818.svg?token=exp=1615418212~hmac=68c328f616e3dcce074243db41a0784e" img-hidden>
  </div>
</div>

БЛОГ НА HUSL

mouseover и mouseout в цикле for JS

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