FadeIn 1元素

Question

我正在制作一个包含3个项目组合项目的主页，当我将其中一个项目悬停时，必须在此元素上删除div。但是当我将鼠标悬停在1时，我的代码会在所有div中消失。所以我尝试使用.closest（），但现在没有任何事情发生。有人可以帮我这个吗？

我的HTML：

<div class="hpi">

    <div class="hpi_wrap">
       <h2>Title of this item</h2>
       <p>Blablablab</p>
    </div>

    <img src="//">

<div><!--End hpi1-->

<div class="hpi1">

    <div class="hpi_wrap">
       <h2>Title of this item</h2>
       <p>Blablablab</p>
    </div>

    <img src="//">

<div><!--End hpi2-->

<div class="hpi">

    <div class="hpi_wrap">
       <h2>Title of this item</h2>
       <p>Blablablab</p>
    </div>

    <img src="//">

<div><!--End hpi3-->

我的.hp1_wrap样式为display：none;

我的jQuery：

$(document).ready(function(e) {


    $(".hpi").hover(function(){
        $(this).closest('.hpi_wrap').fadeToggle(300);
    });

});

Answer 1

使用find()代替closest()

$(document).ready(function(e) {
    $(".hpi").hover(function(){
        $(this).find('.hpi_wrap').fadeToggle(300);
    });

});