当我悬停另一个时，jQuery只显示一个div

Question

我有一些具有这种结构的类似块。

我的“info_hover”块被隐藏，直到我将悬停“item_name”块。但是当我将鼠标悬停时，会显示所有“info_hover”块。如何使“info_hover”块仅显示在我所悬停的那个div上。

HTML CODE：

<div class="item_image">
    <img src="" alt="">
    <div class="info_hover">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, sapiente! ipsum dolor sit amet.
    </div>
</div>
<div class="item_info">
    <div class="item_name">item_name</div>
    <div class="item_price">item_price</div>
</div>

jQuery代码：

$( ".item_name" ).hover(
  function() {
    $( ".info_hover" ).show();
  }, function() {
    $( ".info_hover" ).hide();
  }
);

http://codepen.io/Vlasov/pen/apgmxy?editors=1010

Answer 1

这应该有效：

   $( ".item_name" ).hover(
      function() {
        $(this).closest(".item_block").find(".info_hover").show();
      }, function() {
        $(this).closest(".item_block").find(".info_hover").hide();
      }
    );

您引用this，因为您想要访问相对于悬停元素的元素。然后，您会找到一个包含this元素和您要访问的元素的父元素。在这种情况下，.item_block是一个合理的选择，作为单个项目的顶级父项。之后，您将在父级中找到要访问的元素。最后，您可以根据需要修改元素。