Нужно добавить класс в div при наведении другого div

Question

У меня есть список div с тем же классом.Каждый div содержит другие div, .header, .body, .footer.Когда я наведите курсор на один из элементов внутри одного элемента div, например .header, мне нужно добавить / удалить класс другого элемента .footer внутри того же элемента div.

Проблема в том, что при наведении курсора на один .header - я добавляю класс ко всем .footer элементам внутри всех других div, но мне нужно добавить новый класс только к .footer внутри текущего div.

$(document).ready(function() {
  $('.header').hover(function() {
    $('.footer').addClass('active');
  }, function() {
    $('.footer').removeClass('active');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
  <div class="list_item">
    <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div>
  </div>
  <div class="list_item">
    <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div>
  </div>
  <div class="list_item">
    <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div>
  </div>
</div>

Answer 1

Вы можете использовать псевдо :hover в CSS и общий селекторный комбинатор ~

.list_item:hover .header:hover ~ .footer {
  background: red;
}

<div class="list">

  <div class="list_item">
    <div class="header">Hover me</div>
    <div class="body">B</div>
    <div class="footer">F</div>
  </div>

  <div class="list_item">
    <div class="header">Hover me</div>
    <div class="body">B</div>
    <div class="footer">F</div>
  </div>

  <div class="list_item">
    <div class="header">Hover me</div>
    <div class="body">B</div>
    <div class="footer">F</div>
  </div>

</div>

в противном случае, если вы не можете рассчитывать на то, что .footer будет следующим братом - используйте jQuery

jQuery(function($) {

  $('.header').hover(function() {
    $(this).closest('.list_item').find('.footer').toggleClass('active');
  });
    
});

.active {
  background: red;
}

<div class="list">

  <div class="list_item">
    <div class="header">Hover me</div>
    <div class="body">B</div>
    <div class="footer">F</div>
  </div>

  <div class="list_item">
    <div class="header">Hover me</div>
    <div class="body">B</div>
    <div class="footer">F</div>
  </div>

  <div class="list_item">
    <div class="header">Hover me</div>
    <div class="body">B</div>
    <div class="footer">F</div>
  </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Да, можете попробовать приведенный ниже фрагмент кода, я уже тестировал его.

$(document).ready(function() {     
    $('.header').hover(function(){     
        $(this).siblings(".footer").addClass('active');    
    },     
    function(){    
        $(this).siblings(".footer").removeClass('active');      
    });
});

Answer 3

Вы должны делать это относительно this (который является текущим наведенным заголовком), и вы можете использовать nextAll, если это единственный нижний колонтитул в группе:

$('.header').hover(function() {
    $(this).nextAll('.footer').addClass('active');
  },
  function() {
    $(this).nextAll('.footer').removeClass('active');
  });

.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">

  <div class="list_item">
    <div class="header"> header </div>
    <div class="body"> body </div>
    <div class="footer"> footer </div>
  </div>
  <div class="list_item">
    <div class="header"> header </div>
    <div class="body"> body </div>
    <div class="footer"> footer </div>
  </div>
  <div class="list_item">
    <div class="header"> header </div>
    <div class="body"> body </div>
    <div class="footer"> footer </div>
  </div>

</div>

Answer 4

Вам нужно добавить другое свойство ID для некоторого div, получить $('#footer3') и изменить его