如何使用渐变（精灵）背景图像设置导航答案

【问题标题】：How to set up navigation with fading (sprite) background image如何使用渐变（精灵）背景图像设置导航
【发布时间】：2011-10-21 21:50:33
【问题描述】：

我设计了一个看起来像这样的精灵：

这个想法是让图像的上部在悬停时淡入（在导航系统中）。除了导航项的文本外，我一切正常。正如您在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);
    });
});

谢谢，

尼克

【问题讨论】：

标签： jquery css navigation hover fade

【解决方案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，调整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);
    });
});

【讨论】：

【解决方案2】：

不要将背景图片放在 span 上。

HTML

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

CSS

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

.navigation li span {
    width: 223px;
    height: 30px;
    display: block;
    opacity: 0;
    filter: alpha(opacity=0);
}

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

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

【讨论】：