需要在另一个 div 悬停时向 div 添加类答案

【问题标题】：Need to add class to div on hover of another div需要在另一个 div 悬停时向 div 添加类
【发布时间】：2019-09-19 08:08:36
【问题描述】：

我有一个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>

【问题讨论】：

你应该使用 CSS，而不是 JS。

标签： javascript jquery

【解决方案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>

【讨论】：

【解决方案2】：

您应该相对于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>

【讨论】：

【解决方案3】：

可以试试下面的代码sn-p，我已经测试过了。

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

【讨论】：

【解决方案4】：

你需要为所有的div添加不同的ID属性，获取$('#footer3')并改变它

【讨论】：

没有。这实际上是解决这个问题的最糟糕的方法。