Fade in div when hovering over parent div with jquery
<p>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:</p>

<pre><code>$("#front-nav-wrapper").hover(function(){
    $("#front-nav").fadeIn("slow");
},
function(){
    $("#front-nav").fadeOut();
});
</code></pre>

<p>This is the HTML</p>

<pre><code>&lt;div id="front-nav-wrapper"&gt;
&lt;div id="front-nav"&gt;
    &amp;nbsp;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And this is the CSS</p>

<pre><code>#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;

}
</code></pre>
