2

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

2 ответа 2

2

Не ответ на вопрос, а скорее предложение. Может тут вообще не стоит использовать 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>

5
  • Как вы могли заметить, таких блоков с картинками несколько, где необходимо сделать замену. С одним блоком конечно же все просто... но как сделать это для большего (неопределенного) кол-ва? Я не придумал ничего лучше, как поместить их в цикл. На моем рабочем варианте все работает, только почему-то при наведении на блок все остальные скрываются, виден только активный блок с измененной картинкой. Не знаю почему тут не получилось воспроизвести этот эффект )) 11 мар 2021 в 8:07
  • @OlegKasumoff Добавил второй блок и второй вариант(в скрытом сниппете). Я думал что под курсором должен меняться только один блок - В вопросе написано: одна картинка скрыться, другая появиться(c). Или я вопроса не понял. Т.е. должны менятся картинки во всех блоках одним разом? ... так ведь от эффекта останется только background-color. Подозревал что j <= 6 это опечатка, но теперь совсем запутался. 11 мар 2021 в 9:03
  • Итак, спасибо вам за ваш вариант, который идеально подошел с незначительными изменениями (вместо opacity использую display). Еще раз спасибо! 11 мар 2021 в 9:38
  • @OlegKasumoff сразу бы и дали ссылку. Добавил третий вариант на JS, без всяких ваших бесконечно-ненужных id 11 мар 2021 в 9:52
  • В последнем варианте на JS изменения происходят во всех блоках одновременно, а необходимо наоборот, только в активном, там где находится курсор 11 мар 2021 в 10:09
1

В итоге сделал так (спасибо @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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.