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