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

});