1

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

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

我需要弄清楚，我敢肯定你已经猜到了，只要鼠标放在其中任何一个上面，它也会使另一个变白。

我制定了以下排序伪代码：

$('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

4

5 回答 5

6

除非我遗漏了什么，否则 jquery 在这里是多余的。简单的CSS就足够了：

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

孩子li从父母那里继承颜色。

http://jsfiddle.net/7Jz9a/

于 2013-05-13T17:50:48.543 回答
2

您应该能够仅使用 CSS 而不是使用 jQuery 的“.hover()”来做到这一点。但是，您现有的 CSS 已经有一些冲突:hover的样式，不能很好地与双重 jQuery.hover()行为配合使用。

我会从清理 CSS 开始，如果你必须使用 jQuery，那么至少你会有一个更干净的石板。

于 2013-05-13T17:53:10.033 回答
1

只需使用

#menu li:hover a {
    color: white;
}
于 2013-05-13T17:58:23.787 回答
1

尝试以下简单的 CSS 添加

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

希望它会有所帮助

于 2013-05-13T18:01:33.153 回答
1

你可以用 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');}
);
于 2013-05-13T18:12:16.187 回答