Question

I’m trying to get a div to fade in using jquery, when the mouse hovers over it’s parent div. Not sure exactly how to do this, and the code I’ve got below isn’t working:

$("#front-nav-wrapper").hover(function(){
    $("#front-nav").fadeIn("slow");
},
function(){
    $("#front-nav").fadeOut();
});

This is the HTML

<div id="front-nav-wrapper">
<div id="front-nav">
    &nbsp;
</div>
</div>

And this is the CSS

#front-nav-wrapper {
    height:125px;
    position:fixed;
    top:0px;
    padding:0px;
    width:100%;
}
#front-nav {
    height:125px;
    position:fixed;
    top:0px;
    margin:0px;
    padding:0px;
    z-index:75;
    width:100%;
    background:#fff;
    background:rgba(255,255,255,.5);
    display:none;

}

Answer 1

There is a problem with your function, try this:

$("#front-nav-wrapper").bind("onmouseover", function(){
    $("#front-nav").fadeIn("slow");
});

$("#front-nav-wrapper").bind("onmouseout", function(){
    $("#front-nav").fadeOut("slow");
});