jQueryは、私が別の場所に置いたときに1つの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要素とアクセスしたい要素の両方を保持する親要素を見つけます。この場合、.item_blockは個々のアイテムの最上位の親として論理的な選択肢です。その後、親の中でアクセスしたい要素を見つけます。最後に、必要に応じて要素を変更します。