Question

我设计了一个如下所示的精灵：

enter image description here

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

Answer 2

不要将背景图像放在跨度上。

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

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

2 个答案: