jQuery下拉菜单悬停状态

Question

我的问题是：

我有一个下拉菜单，我希望当我悬停菜单时，文本颜色会发生变化，而当我悬停子菜单时，两者的悬停状态都会保持不变。我使用此代码：

$("ul li").hover(function () {

    $(this).stop().animate({ backgroundColor: "white"}, 500);

},
function () {

    $(this).stop().animate({ backgroundColor: "black"}, 400);

});

}

在菜单和子菜单中悬停时为背景颜色设置动画。

我想将悬停时的文本颜色更改为（菜单和子菜单不同，动画颜色不同）。为此我使用以下代码：（子菜单示例，对于菜单示例，将选择器更改为 $('ul.menu li a')

$('ul.submenu li a').hover(function () {

$(this).css({color:'#FFFFFF'});

},
function () {

$(this).css({color:'#00FF00'});

});

这一切正常，但是当我将子菜单悬停时，菜单返回到原始颜色状态（因为鼠标悬停在菜单悬停时被激活）。

我想要的是，当我悬停子菜单时，菜单中的悬停状态也保持活动状态。

我尝试了很多东西，但都给我带来了问题，唯一有效的是 css，但我也需要动态控制文本颜色。

有效的 CSS：

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

（使用这个 css 代码，我用 css 控制菜单颜色，当我悬停子菜单时，菜单保持活动状态，但子菜单适用于 jquery .hover）。

有人可以帮忙吗？谢谢！

HTML 菜单：

<ul class="menu">

      <li><a href="#">text</a></li>

      <li><a href="#">text</a>

        <ul class="submenu">
          <li><a href="#">text</a></li>
          <li><a href="#">text</a></li>
          <li><a href="#">text</a></li>
        </ul>

      </li>

      <li><a href="#">text</a>

</ul>

Answer 1

如果您希望悬停设置当前颜色，直到悬停其他 li，请使用类。

css:

ul.submenu li a { color: #0f0; }
ul.submenu li a.hovered { color: #fff; }

js:

$('ul.submenu li a').mouseover( function() {
   if (!$(this).hasClass('hovered')) {
      $('ul.submenu li a.hovered').removeClass('hovered');
      $(this).setClass('hovered');
   }
});

希望我理解正确。祝你的项目好运。

[编辑]

哦，嗯，也许你想要它，所以当你转到子菜单时，你的父 li 不应该失去它的颜色，尽管你鼠标移出。如果是这样，同样的想法是适用的，你只希望鼠标悬停代码在菜单项 mouseover 上选择（因此将鼠标悬停在菜单上会取消设置所有其他菜单并设置这个），那么你还需要让它删除你的如果您将鼠标移出其子菜单的 ul，则菜单的类颜色。我不知道你的菜单在结构上是什么样子的，所以我不能评论这个选择器的工作 CSS。

哦，最后你想要一个 CSS 规则与子菜单悬停来处理子菜单的突出显示。

对不起，漫无边际的答案...