JQuery Show Class on hover issue

Question

I am trying to get a div to show when a link is hovered.

There will be multiple classes too so only the nearest should show.

This is what I'm trying:

$(".box").hover(function() {
    $('.overlay').closest.show();
});

<div class="event" id="selector">                                       
    <a class="box" href="#" title="">Event</a>      
    <div class="overlayOuter">    
        <div class="overlayInner"></div>    
    </div>    
    <div class="overlay" style="display:none;"> I will come out when class Box is covered 
    </div>    
</div>  

When I hover class="box" then class="overlay" is shown.

The problem is that Overlay is not appearing so I'm guessing my jquery is wrong?

How can I get this to work?

Answer 1

Try this, overlay is not a parent it is a sibling, closest() gets the closest parent

   $(this).siblings('.overlay').show();

Answer 2

Try this:

$(this).siblings('.overlay').show();