當我懸停另一個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是作爲單個項目的頂級父項的合理選擇。之後，您可以在父級中找到您想要訪問的元素。最後，您可以根據需要修改元素。