FadeIn 1 element

Question

I'm working on a homepage with 3 portfolio items where when I hover one of them there must fades in a div over this element. But my code fades in all the divs when I hover 1. So I tried it with .closest() but now there is nothing happening. Can someone help me with this?

My 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-->

My .hp1_wrap is styled with display: none;

My jQuery:

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


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

});

Answer 1

Use find() instead of closest()

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

});