Question

就像在http://jsfiddle.net/eFLdd/1/中一样，我根据精灵图像进行了导航。

还有悬停图像。我想为每个更改类的项目设置鼠标悬停功能，例如nav1hover，淡出和淡入。

有人有提示吗？ thx提前。

Answer 1

最好同时显示导航的两种状态，例如，请参阅http://jsfiddle.net/graham/kxpLu/2/。

通过创建导航的简单列表：

<ul class="navigation">
    <li class="nav1"><a href=""><span></span></a></li>
    <li class="nav2"><a href=""><span></span></a></li>
</ul>

其风格如下：

.navigation li { 
    background: url(http://blog.grahamlicence.co.uk/jsfiddle/nav.jpg) no-repeat 0 0;
    width: 80px;
    height: 20px;
}
.navigation li.nav2 { background-position: -82px 0; }
.navigation li span { 
    background: url(http://blog.grahamlicence.co.uk/jsfiddle/nav.jpg) no-repeat 0 -56px;
    width: 80px;
    height: 20px;
    display: block;
}
.navigation li.nav2 span { background-position: -82px -56px;}

我在这里所做的是将<span>元素链接的正常状态和<li>背景中的悬停状态添加。

然后脚本在悬停时淡出正常状态，如下所示：

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

jquery在sprite的悬停图像中淡出

1 个答案: