Question

我在jquery下拉菜单中有另一个问题。

在我的示例中（底部的链接）我希望当我将3ºlevel子菜单悬停时，当前子菜单项的文本颜色保持悬停状态（示例中为黄色）。

我在代码中有注释来解释问题所在。

由于

Answer 1

我将悬停从ul.submenu li a移到了ul.submenu li，这样当它的子菜单悬停在它上面时就没有调用unhover功能。然后我将函数中的样式应用于.children('a')标记，如下所示：

$('ul.submenu li').hover(function() {
    $(this).children('a').css({
        color: '#eff803'
    });

    $(this).find(".submenu li:first a").stop().animate({
        backgroundColor: '#0d0167'
    });
}, function() {
    $(this).children('a').css({
        color: '#ffffff'
    });

    $(this).find(".submenu li:first a").stop().animate({
        backgroundColor: '#0000FF'
    });
});

Answer 2

首先，尽可能避免css()。你最好使用addClass()和removeClass()。定义一个包含您想要的颜色的悬停类（假设您的菜单不在另一个<ol>或<ul>内）使用类似

的颜色

$('.menu a').hover(function() {
  var $path = $(this).parents('li').find('> a').not(this);
  $(this).closest('.menu').find('a').not($path).removeClass('hover');
  $path.addClass('hover');
  //code that animates to the colours in your hover class
  $(this).addClass('hover').css('');//make it stick
});

编辑：抱歉没想到样式的消失

Jquery / Javascript子菜单颜色悬停

2 个答案: