javascript - 需要在悬停另一个 div 时向 div 添加类

Question

我有一个具有相同类的 div 列表。每个 div 包含其他 div，.header、.body、.footer。当我将鼠标悬停在一个 div 内的某个元素上时，例如 .header，我需要在同一 div 内的另一个 .footer 元素上添加/删除一个类。

问题是当我悬停一个 .header - 我正在向所有其他 div 内的所有 .footer 元素添加类，但我只需要添加新类到当前 div 中的 .footer。

$(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

您可以在 CSS 中使用 :hover 伪元素和通用的兄弟组合器选择器 ~

.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>