Question

我环顾四周，看到了非常技术性的导航，对我来说非常棒。当我读到它的代码时，我被卡住了。我尽我所能，但无法理解，请帮助我。

http://jsfiddle.net/RXvyY/

我尝试了许多时间使这个导航与orignal相同，但我不是我的错。请帮我解决...当我将鼠标悬停在导航按钮上时它不会改变..当我点击它时，它不可能改变...

原始导航链接是......首先看到它。

http://www.intuit.com/

请帮帮我。

Answer 1

尝试更改css的这一部分：

.primary-level a {
    display:block;
    height: 80px;
    background:url("http://www.intuit.com/sbweb/common/includes/header/navigation/images/nav_main.png") no-repeat;
}

您正在更改悬停时链接的背景位置，但链接实际上没有背景设置。 height是指链接的目标 - 您可以将其更改为您想要的任何内容。我把它设置在整个菜单的高度，但你可能只想要一半。

编辑：

你可以加上这个：

#nav-primary-intuit a:active{
     background-position: -9px -220px;
}

你必须为每个菜单项添加它，当然

编辑2：

那怎么回事......

将你的CSS更改为：

#nav-primary-intuit a.active {
    background-position: -9px -220px;
}

请注意active现在是一个类而不是伪类

添加此jquery：

$("a").bind({
    click: function () {
        $("a").removeClass("active");
        $(this).addClass("active");
    }
});

removeClass使active课程远离所有链接，然后将其添加回所选链接

CSS Sprites不会悬停在执行动作上

1 个答案: