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

Posted 2023-03-06

【中文标题】如何使用渐变（精灵）背景图像设置导航

【英文标题】：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);
    );
);

谢谢，

尼克

【参考方案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;

JS

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