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

Question

我有一些与此结构相似的块。

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

HTML代码：

<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，因为你想访问一个相对于histed元素的元素。然后，您会找到一个父元素，该元素既包含this元素，也包含您要访问的元素。在这种情况下，.item_block是作为单个项目的顶级父项的合理选择。之后，您可以在父级中找到您想要访问的元素。最后，您可以根据需要修改元素。