jquery - 如何设置带有淡入淡出( Sprite )背景图像的导航

Question

我设计了一个如下所示的 Sprite :

这个想法是让图像的上部在悬停时淡入(在导航系统中)。除了导航项的文本之外，我的一切都正常。正如您在 this page 上看到的那样，导航文本与背景图像一起淡入和淡出，因为它包含在淡出的范围内。我想知道是否有人可以帮助我弄清楚如何保持文本始终显示。

这是 html:

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

还有 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);
}

和脚本:

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

谢谢

尼克

Answer 1

这应该可以解决问题。实例:http://jsfiddle.net/zDwP9/2/

HTML:(将 span 移至 a 标记之外)

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

CSS 更改:(加宽 li、向左浮动 a 和向右浮动 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:(将选择器从 li a 更改为 li)

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