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的颜色声明移到父li，同时提供了a color:inherit。

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

悬停状态很古怪

2 个答案: