Having problems with simple jQuery snippet

I am having problems with simple jQuery snippet. Here is the markup:

        <div class="banner">
            <div class="bannerInnerRight">
                <span class="box5"><h4>Reviews</h4></span>
                <span class="box6"><h4>Mission Statement</h4></span>
                <span class="box7"><h4>Serving Areas</h4></span>
                <span class="box8"></span>
            </div><!-- bannerInnerRight -->
        </div><!-- banner -->

The h4s are being hidden using css (display:'none'). When each span i开发者_开发技巧s hovered over I want its respective h4 to show.

My attempt:

$(document).ready(function() {

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

});

I must be using the this keyword wrong, how do I get this to work?

Try

$(this).find("h4").show();

Try:

$(this).find("h4").show();

$("h4", $this).show();

The second parameter allows you to specify what you want to search in.

How about the following:

$(document).ready(function() {

    $('.bannerInnerRight').find('span').mouseover(function() {
        $(this).find('h4').show();
    });

});