Hover on div and show other div but hidden div is out side of main container

Question

i was trying to show a div on hover which is out side the main container, i find mostly codes about showing a div which is just inside the main container, but i want to show and hide a div which is out side of main container

Check Demo HERE

JS

$(function(){
    $(".box").hover(function(){
      $(this).find(".overlay").fadeIn();
    }
                    ,function(){
                        $(this).find(".overlay").fadeOut();
                    }
                   );        
});

this fiddle is working for hovering a div and show div which is inside it, but how can we do it for a div and the other is also outside of main div

Answer 1

If .overlay is the only div with that class, you can just use :

$('.overlay').fadeIn()

or

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

Updated Fiddle

Answer 2

Then you can change this code:

$(this).find(".overlay");

To this:

$(this).parent(".overlay")

Or if the the only class you have overlay, just use:

$('.overlay)

Answer 3

You could possibly do this with CSS only if your div is adjacent instead of inside:

example fiddle

css

    div.overlay { opacity:0; -webkit-transition:opacity 500ms ease; transition:opacity 500ms ease;}
    div.box:hover ~ div.overlay,
    div.overlay:hover {    opacity:1; height:100%;}

html

<div class="box">Info about a game</div>
<div class="overlay"> Play </div>