淡入 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);
    });

});