Отображать последующие элементы при наведении

Рейтинг: 0Ответов: 1Опубликовано: 13.03.2023

Хочу реализовать hover-эффект, да такой, что элементов будет 15-20 условно, при этом сам эффект реализовал так:

  
html:
<div>
  <div class="block1"></div>
</div>
<div>
  <div class="block2"></div>
</div>
<div>
  <div class="block3"></div>
</div>
<div>
  <div class="block4"></div>
</div>


css:
.block1 {
  width: 100px;
  height: 100px;
}

.block2 {
  width: 100px;
  height: 100px;
  display:none;
}

.block2.when_block1_hover {
  display:block;
}


js + jQuery:
$(function(){
  $('.block1').hover(function(){
    $('.block2').addClass('when_block1_hover');
  }, function(){
    $('.block2').removeClass('when_block1_hover');
  })
});

Если я буду таким методом реализовывать каждый элемент, то будет слишком массивно! Подскажите, как можно реализовать счётчик, либо что-то похожее.

css javascript html jquery
Источник: Stack Overflow на русском

Ответы

▲ 0

Если я буду таким методом реализовывать каждый элемент, то будет слишком массивно! Подскажите, как можно реализовать счётчик, либо что-то похожее.

Нужно разбить все элементы на два типа.

  • На который будет выполняться hover
  • Те, которые будут показываться/скрываться

$(function(){
  $('.main').hover(function(){
    const o = $(this).parent().next().find('div:first-child')
    o.addClass('when_block_hover');
  }, function(){
    const o = $(this).parent().next().find('div:first-child')
    o.removeClass('when_block_hover');
  })
});
.main {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

.info {
  width: 100px;
  height: 100px;
  display:none;
}

.info.when_block_hover {
  display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="main">block1</div>
</div>
<div>
  <div class="info">block2</div>
</div>
<div>
  <div class="main">block3</div>
</div>
<div>
  <div class="info">block4</div>
</div>