JQuery show DIV on another DIV on mouseover

jquery, mouseover

Solution

If I understand you correctly, you want to only display `overlay` when hovering over `box`.

You could use CSS psuedo `:hover`:

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

div.box div.overlay
{
    display:none;
}

​div.box:hover div.overlay
{
 display:block;   
}​

http://jsfiddle.net/Curt/BC4eY/

If you would prefer to use animation/jquery to show/hide the `overlay` you can use the following:

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

http://jsfiddle.net/Curt/BC4eY/2/

Problem

I know this may have a simple solution but I'm a Jquery noob. Please, help. How can I show a DIV on another DIV on mouseover? Example, I have this: ``` <div class="box"> Info about a game </div> ``` I want to "overlay" another div on the div "box" ``` <div class="overlay"> Play </div> ``` How can I do that with JQuery? Sorry and thanks in advance!

Original source