Question

I have designed a sprite that looks like this:

The idea is to have the upper portion of the image fade in on hover (in a navigation system). I have everything working except for the text for the navigation items. As you can see on this page, the text for the navigation fades in and out with the background image, as it is contained within the span that is faded. I wonder if someone could help me get my head round how I can keep the text always showing.

Here is the html:

<ul class="navigation">
    <li><a href=""><span>home</span></a></li>
    <li><a href=""><span>contact</span></a></li>
</ul>

And the CSS:

body, ul,li { 
    margin:0;
    padding:0;
}

ul {
    list-style:none;
    text-align: center;
    color: white;
    line-height: 30px;
}

ul a {
    text-decoration: none;
    color: white;
    font-size: 18px;
}

.navigation li { 
    background: url(nav.png) no-repeat 0 -30px;
    width: 223px;
    height: 30px;
}

.navigation li span {
    background: url(nav.png) no-repeat 0 0px;
    width: 223px;
    height: 30px;
    display: block;
    opacity: 0;
    filter: alpha(opacity=0);
}

and the script:

$(document).ready(function() {
    $(".navigation li a").hover(function () {
        $(this).children("span").stop().animate({
            opacity: 1
        }, 300);
    }, function () {
        $(this).children("span").animate({
            opacity: 0
        }, 400);
    });
});

Thanks,

Nick

Answer 1

This should do the trick. Live example: http://jsfiddle.net/zDwP9/2/

HTML: (Moved span outside of a tag)

<ul class="navigation">
    <li><a href="">home</a><span></span></li>
    <li><a href="">contact</a><span></span></li>
</ul>

CSS Changes: (Widened li, floated a left and span right, adjusted width and background position of span)

ul a {
    text-decoration: none;
    color: white;
    font-size: 18px;
    float:left;
    width: 204px;
}

.navigation li span {
    background: url(nav.png) no-repeat -204px 0;
    width: 30px;
    height: 30px;
    display: block;
    opacity: 0;
    filter: alpha(opacity=0);
    float:right;
}

jQuery/JavaScript: (Changed selector from li a to li)

$(document).ready(function() {
    $(".navigation li").hover(function () {
        $(this).children("span").stop().animate({
            opacity: 1
        }, 300);
    }, function () {
        $(this).children("span").animate({
            opacity: 0
        }, 400);
    });
});