Javascript jQuery下拉菜单悬停状态

我的问题是：

我有一个下拉菜单，我希望当我悬停在菜单上时，文本颜色改变，当我悬停在子菜单上时，悬停状态保持不变。我使用以下代码：

$("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：

使用这个css代码，我可以用css控制菜单的颜色，当我悬停子菜单时，菜单将保持活动状态，但子菜单使用jquery.hover

有人能帮忙吗？谢谢

HTML菜单：

---

如果要在悬停其他li之前设置当前颜色，请使用类

css:

js:

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

[编辑]

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

哦，最后你需要一个css规则vs.子菜单悬停来处理子菜单的高亮显示

---

很抱歉回答得太笼统了……

您能提供菜单的完整代码和标记吗？很难弄清楚要部署什么。我用Html标记编辑我的问题。ThanksHello，我的悬停状态适用于菜单和子菜单，使用不同的颜色和背景色动画，我唯一的问题是当我悬停菜单项时，颜色会发生变化，如果我转到子菜单，菜单颜色会恢复到原始颜色，这就是我的问题。如果我把你的代码只放在鼠标上，我也有同样的问题，但是谢谢！啊，我刚刚看到你的回答-我认为你应该能够使用$'ul.menu li'。mouseout关闭你的ul.menu li a的类-这应该覆盖整个menu+子菜单，因为li包含整个子菜单。如果我不清楚，你想处理'menu li a'。通过添加类，b通过添加您想要的css hover类来处理子菜单，c通过捕获$'menu li'。mouseout并使用：$this.children'a.hovered'。removeClass'hovered'来处理菜单或子菜单外的鼠标移动。好的，我会尝试，但我现在不会。如果我使用$'ul.menu li'选择器，菜单和子菜单将返回到相同的颜色，因为就像你说的ul.menu li a的类-应该涵盖整个菜单+子菜单。谢谢

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

<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>

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

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