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');
   }
});

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

[编辑]

哦，嗯，也许你想要它，所以当你去子菜单时，你的父母李不应该失去它的颜色，尽管你躲避了。如果是这样，同样的想法是适用的，你只需要鼠标悬停代码选择菜单项鼠标悬停（因此鼠标悬停在菜单上取消设置所有其他菜单并设置此菜单），然后你还需要让它删除你的菜单的类颜色，如果你鼠标超出其子菜单的ul。我不知道你的菜单在结构方面是什么样的，所以我不能评论这个选择器的工作CSS。

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

对不起那个漫无边际的回答...

jQuery下拉菜单悬停状态

1 个答案: