在侧边栏中的子菜单悬停时更改菜单项的颜色（jsFiddle）答案

【问题标题】：Changing the color of a menu item on hover of a submenu in a sidebar (jsFiddle)在侧边栏中的子菜单悬停时更改菜单项的颜色（jsFiddle）
【发布时间】：2012-06-08 17:52:19
【问题描述】：

我在为我的网站工作的侧边栏中的子菜单悬停时更改菜单项 (.category) 的颜色时遇到问题。正如您在下面的 jsFiddle 示例中所见，当用户将鼠标悬停在某个类别上时，会打开一个子菜单，而当用户悬停一个子菜单项时，悬停颜色为橙色。我想将橙色悬停在子菜单项上。同时，我希望在子菜单打开时将菜单项（类别）颜色更改为浅蓝色。

我尝试单独使用 css 来完成此操作，但所有孩子的悬停颜色都会改变，这不是我想要的。对于解决此问题的任何帮助，我将不胜感激，因为这是我一直试图解决的一个持续存在的问题。

到目前为止我尝试了什么：

 $(this).find(".submenu").show().parent().css('color', 'lightblue');

jsfiddle:

http://jsfiddle.net/BGcDc/38/

【问题讨论】：

标签： jquery css

【解决方案1】：

问题在于链接应用了高优先级的默认蓝色。要更改颜色，您需要在链接上实际更改它。我把它放在hover() 代码中，它起作用了：

$(this).find("a").eq(0).css("color", "#2B60DE");

这会找到li.category 标记的第一个子链接（更多子链接是实际的菜单项）并将颜色更改为浅蓝色 (#2B60DE)。在mouseleave() 代码中，输入相同的代码，但将实际值留空，如下所示：

$(this).find("a").eq(0).css("color", "");

【讨论】：

谢谢大卫，这正是我所需要的。

【解决方案2】：

我已尝试更改第一个元素的颜色，它正在工作，您可以在 jsfiddle 中查看。

您还应该将样式应用于类并通过 javascript 添加/删除类。

http://jsfiddle.net/BGcDc/41/

【讨论】：

检查第一个元素我只在第一个元素上添加类，第一个答案是相同的技术

【解决方案3】：

不是 JQuery 解决方案，但请查看 this answer 以了解如何设置父元素的样式。

我认为它的第二个 jsfiddle sample（纯 css2）可以满足您的需求。

【讨论】：