需要在另一个 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

是的可以尝试下面的代码片段，我已经测试过了。$(document).ready(function() {&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; $('.header').hover(function(){&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $(this).siblings(".footer").addClass('active');&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; },&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; function(){&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $(this).siblings(".footer").removeClass('active');&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; });});