Question

首先让我来描述一下我遇到的问题。请访问http://dev.eduantech.com/about-me以了解我在说什么。必须是一个页面，不能是主页，以便你可以看到我在说什么。

好的，请将鼠标悬停在菜单上，至少是其中包含子菜单的菜单。您会注意到，当您将鼠标悬停在父li上时，子li变为“不可见”，因为它与背景颜色相同。反之亦然，如果将鼠标悬停在子元素上。

我需要弄清楚的是，我相信你已经猜到了，只要鼠标位于其中任何一个的顶部，它就会使另一个变为白色。

我有以下sorta伪代码：

$('li.menu-parent-current > li.menu-child-current a').hover(
    function() {
        $(this).css('color', '#fdfdfd');
    }, function() {
        if (/* mouse leaves parent as well */) {
            // change child color to blue
        } else if (/* mouse did not leave parent */) {
            // make child color white
            $(this).css('color', '#fdfdfd');
        }
    });

毫无疑问，这有改进的余地，所以如果有必要，请继续提供更好的版本。：）

我已经过了几个小时了，但是我无法解决它，我确信这很简单，但我不是jQuery专家。感谢您提供的帮助。：）

修改

嗯......事实证明我让它变得复杂了。作为一个相对新手不会让你思考正确。：P

Answer 1

除非我遗漏了某些东西，否则jquery在这里过度杀伤。简单的css就足够了：

li:hover{
    background-color: blue;
    color: white;
}

孩子li继承父母的颜色。

http://jsfiddle.net/7Jz9a/

Answer 2

你应该只使用CSS而不是使用jQuery的“.hover（）”。但是，您现有的CSS已经存在一些冲突的:hover样式，这些样式与双倍的jQuery .hover()行为无法很好地协作。

我首先要清理CSS，如果你必须使用jQuery，那么至少你会有一个更清晰的名单。

Answer 3

只需使用

#menu li:hover a {
    color: white;
}

Answer 4

尝试使用以下简单的css添加

#menu li:hover a{
  color: #FDFDFD;
}

希望它会有所帮助

Answer 5

你可以用CSS和jQuery做到这一点。

如果你想用CSS做到这一点：

li:hover a{color:#fff;}
li:hover ul li a{color:#fff;}

如果你想用jQuery做到这一点：

$('ul li').hover(
  function(){$(this).find('a').css('color','#fff');},
  function(){$(this).find('a').css('color','##36c');}
);

当悬停在父李上时，使子颜色变为白色，反之亦然

5 个答案: