Cannot generate a jQuery fadeIn/fadeOut on a tab hover state
<p>Just to set the scene, I'm inexperienced when it comes to jQuery (but not web design) so I'll appreciate some assistance here! </p>

<p>Basically, I'm trying to get the hover states on my navigation bar to fade in (on the hover) and fade out (on the mouse off). It's a simple navigation bar, no images, just pseudo selectors doubled up as classes so that jQuery can actually pick up the CSS okay. </p>

<p>I've tried a number of scripts but I can't seem to find what I'm looking for. The code is simple, the solution is simple yet I'm having absolutely no luck so here we go.</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;a class = "tab selected" href = "index.html"&gt;home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class = "tab" href = "portfolio.html"&gt;portfolio&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class = "tab" href = "index.html"&gt;contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p><strong>CSS:</strong></p>

<pre class="lang-css prettyprint-override"><code>nav ul li a.tab { 
    display: inline-block; 
    padding: 15px 20px; 
    min-width: 40px; 
}   

nav ul li a.tab:link, nav ul li a.tab.link { 
    padding: 15px 20px; 
    color: #656359; 
    text-align: center; 
}

nav ul li a.tab:visited, nav ul li a.tab.visited { color: #656359; }

nav ul li a.tab:hover, nav ul li a.tab.hover { 
    padding: 15px 20px; 
    background-color: #d5d1bc; 
}

nav ul li a.tab:active, nav ul li a.tab.active { color: #901f78; }
</code></pre>

<p><strong>jQuery:</strong></p>

<pre><code>$('.tab.hover').hover(
    function(){
        $(this).fadeIn();
    }, 
    function(){
        $(this).fadeOut();
    }        
);      
</code></pre>

<p>I've attempted to use the mouseover/mouseout functions as well but no luck. I'm just getting no change at all in browser. My jQuery file is hooked up properly as well.</p>

<p>It's an unoriginal post but after 2 days of research, I'm out of ideas so thanks in advance!</p>
