Question

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!

Answer 1

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/