[jQuery] Anchor Child Not Responding to Hover

[Steven]

I have the following markup:

<a href="#" id="close"><span></span></a>

The span is hidden by CSS. I then have the following jQuery code:

        // Hook close button hover
        $('a#close').hover(
                function(){
                        $('span',this).fadeIn();
                },
                function(){
                        $('span',this).fadeOut();
                }
        );

This does work only when the child span is displayed (not hidden via
CSS) by default. If the span is hidden, it doesn't do anything. I'm
tearing my hair out over this. I've rewritten those 8 lines over and
over, so I'm pretty sure it's not syntactical. Just for kicks, here is
the CSS:

div#toolbar a#close
{
        display: block;
        float: right;
        width: 48px;
        height: 100%;
        background: transparent url('close.png') center center no-repeat;
        margin-top: -10px;
}
div#toolbar a#close span
{
        display: block;
        width: 100%;
        height: 100%;
        background: transparent url('close_hover.png') center center no-
repeat;
        display: none;
}