jquery - 悬停状态很古怪

Question

我一直在研究一个下拉菜单，它对父母和孩子都有不同的颜色，当处于悬停状态时会发生变化：

http://jsfiddle.net/cELJ6/1/

不过，我对此有一个小怪癖。

Home链接很好，没有悬停时也很好Products。Section2

问题是：

1) 当我将鼠标悬停在 上Product时，链接的颜色需要为白色。（BG 颜色很好，工作正常）

2) 当我将鼠标悬停在子元素上时，例如Product1，则Products链接颜色需要为白色

Products在和之间徘徊Section2似乎很古怪。有时颜色是白色，有时是灰色 (#777)

有没有解决的办法？

谢谢

Answer 1

$('ul > li.leaf').each(function(){
    $(this).mouseenter(function(e){
        $(this).find('a').css('color','white');
    });
    $(this).mouseleave(function(e){
        $(this).find('a').css('color','#777777');
    });

   });

 $('.expanded > ul.leaf').each(function(){
    $(this).mouseenter(function(e){
        $(this).find('a').css('color','white');
    });
    $(this).mouseleave(function(e){
        $(this).find('a').css('color','#777777');
    });

   });

Answer 2

这不是怪癖，这就是您的代码的工作方式。

您的 javascript 中的颜色定义被应用为内联样式，它高于普通的 css 样式。这会应用灰色并导致怪癖。为什么你有javascript呢？

编辑：我将您的小提琴编辑为我认为您希望它的行为方式。我只是在a给出.lia color:inherit

http://jsfiddle.net/cELJ6/2/