Having problems with simple jQuery snippet
<p>I am having problems with simple jQuery snippet. Here is the markup:</p>

<pre><code>        &lt;div class="banner"&gt;
            &lt;div class="bannerInnerRight"&gt;
                &lt;span class="box5"&gt;&lt;h4&gt;Reviews&lt;/h4&gt;&lt;/span&gt;
                &lt;span class="box6"&gt;&lt;h4&gt;Mission Statement&lt;/h4&gt;&lt;/span&gt;
                &lt;span class="box7"&gt;&lt;h4&gt;Serving Areas&lt;/h4&gt;&lt;/span&gt;
                &lt;span class="box8"&gt;&lt;/span&gt;
            &lt;/div&gt;&lt;!-- bannerInnerRight --&gt;
        &lt;/div&gt;&lt;!-- banner --&gt;
</code></pre>

<p>The <code>h4</code>s are being hidden using css (<code>display:'none'</code>). When each span is hovered over I want its respective <code>h4</code> to show.</p>

<p>My attempt:</p>

<pre><code>$(document).ready(function() {

    $('div.banner &gt; div &gt; span').mouseover(function() {
        $(this &gt; h4).show();
    });

});
</code></pre>

<p>I must be using the <code>this</code> keyword wrong, how do I get this to work?</p>
