-1
      • 编辑 - - - 活动页面状态正在工作。我现在如何防止悬停效果仍然在活动页面的菜单按钮上滚动？就像我希望音频按钮在 audio.html 页面上保持蓝色，而不是在鼠标悬停时滚动到灰色悬停状态。
      • 原帖 - - -

我有一个带有 CSS 和 jquery 函数、菜单精灵和所有内容的简单菜单......网站的每个部分都有自己的 html 文件以保持简单......截至目前，正常的链接状态和悬停功能有效，我无法让活动页面状态正常工作并相应地移动精灵。这是我目前正在使用的代码。

的HTML

CSS

菜单精灵位于 /images/menusprite.png 与 index.html 相关（它不会让我链接它或直接发布图像）

使用我设置的当前结构，菜单按钮滚动到精灵中的第二个灰色状态，我想将活动页面的相应菜单按钮设置为蓝色状态，以指示正在查看的当前页面。我试图通过几种方式为这样的函数指定一个类，但我根本不知道 jquery，无论哪种方式我设置 CSS，它都会使按钮完全淡出不透明度为 0，而不是活动页面的按钮是处于蓝色状态。那么，考虑到这种特殊的结构，在 CSS 和页面对应的 li 元素中指定活动类的正确方法是什么？

4

1 回答 1

0

active您可以通过在链接上检查您的课程来防止悬停功能：

$("ul#nav li a").css({"opacity" : 0}).hover(function(){
    if($(this).hasClass('active')) { return; }
    $(this).stop().animate({"opacity" : 1}, 400); //Change fade-in speed

    }, function(){
    if($(this).hasClass('active')) { return; }
    $(this).stop().animate({"opacity" : 0}, 200);//Change fade-out speed
});

注意：
如果活动类在您的a标签上，则此方法有效。当它在您的li-element 上时，您必须使用以下行查找它：

if($(this).parents('li').hasClass('active')) { return; }

这是一个例子：

Fiddle

于 2013-08-04T15:45:38.453 回答