javascript - 将鼠标悬停在一个 div 上以显示某个类的最近 div

Question

我想将鼠标悬停在一个 div 上并使用 jquery 按名称查找最近的 div 并显示该 div。

<div class="entry">
  <div class="body"></div>
  <div class="date"></div>
  <div class="footer"></div>

  <div class="body"></div>
  <div class="date"></div>
  <div class="footer"></div>

  <div class="body"></div>
  <div class="somethingelse"></div>
  <div class="footer"></div>
</div>

所有的 .footer 类都将被隐藏，但我想做到这一点，以便当我浏览 .body 类时，只有最近的 .footer 类显示。 [意思是:如果我将鼠标悬停在第一个 .body 类上，将只显示第一个 .footer。 ]

我当前的代码无法正常工作，我开始怀疑它是否有问题。

当前的 jquery 代码:

$('.footer').hide();
$('.body').hover(function(){
     $(this).closest('.footer').find('.footer').show();
});

Answer 1

虽然问题和this question一样，原因略有不同。

当您使用 .closest(".class") 时，它等效于 .parents().filter(".class").first()(或.last()，我不记得 parents() 的确切工作方式，因为那是 closest 的用途。

即它上树

因此 $(".body").closest(".entry") 将为您的 HTML 提供一个元素。

在这种情况下，您需要 sibling ，但更具体地说是下一个。有一个 jquery 方法 .next() 看起来是正确的，但正如上面链接中所详述的，这只给出了下一个(在您的 HTML 中，这将是 date div) 即使应用了过滤器 - 所以 $(this).next(".footer") 会给出一个空集(因为它不是 .date) .

解决方法是:

$(this).nextAll(".footer").first()

一旦你开始工作，你会发现你的悬停没有像预期的那样工作，因为页脚没有再次隐藏 - 因为你使用的是 .hover 而不是 mouseenter mouseout，您只需将 .hide() 调用移动到 second 事件处理程序中，给出:

// startup
$(".footer").hide();

// event
$(".body").hover(function() {
    $(this).nextAll(".footer").first().show();
}, function() {
    $(".footer").hide();
});

div > div { width: 100px; height: 10px }
.body { border: 1px solid red; }
.date { border: 1px solid blue; }
.footer { border: 1px solid green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry">
  <div class="body"></div>
  <div class="date"></div>
  <div class="footer"></div>

  <div class="body"></div>
  <div class="date"></div>
  <div class="footer"></div>

  <div class="body"></div>
  <div class="somethingelse"></div>
  <div class="footer"></div>
</div>