Question

我目前正在使用CSS和图像精灵进行导航（下面的代码）。这可以按照预期的方式工作，但是我希望通过淡入淡出来缓解这种转变。

我认为最好使用JQuery，但是我想留下CSS以便为那些禁用Javascript的人添加支持。任何人都能指出我如何实现这种“合作”的正确方向吗？！

HTML：

<ul id="menu">
    <li id="home"><a href="#"></a></li>
</ul>

CSS：

nav
{
    margin-top: 17px;
    float: right;
}

nav #menu
{
    display: block;
    height: 22px;
    margin: 0px;
    padding: 0px;
}

nav #menu li
{
    list-style-type: none;
    float: left;
    padding-left: 28px;
}

nav #menu li a
{
    background: url(/Content/Images/navigation.png) no-repeat;
    height: 22px;
    display: block;
}

nav #menu #home 
{
    width: 53px;
}

nav #menu #home a:hover
{
    background-position: 0 -22px;
}

Answer 1

我会做两件事之一：

1）在jQuery中试用animate函数 2）在li：

中创建一个包装器

<ul>
    <li><span class="bg-image" /><a href="#"></li>
</ul>

然后像这样使用jQuery：

$(document).ready(function () {
    $("#menu li a").bind("mouseover", function () {
        $(this).siblings("span.bg-image").css("background", "url(URL TO IMAGE)").hide().fadeIn(100);
    })
});

重复并使用非热图像进行鼠标移除。我假设您将使用透明的占位符类型图像作为非热状态，确保热门类的宽度/高度相同。

Answer 2

将一个类添加到正文，并在打开后立即使用javascript将其删除。

<body class="nojs">
<script>$("body").removeClass("nojs").addClass("js")</script>

现在在css中你可以为没有javascript的所有人添加任何规则

.nojs #boton1:hover {background: url(navigation.png) no-repeat;}

并且仅为启用了javascript的人创建规则

.js #boton1 {}

使用JQuery和图像精灵

2 个答案: