更改侧边栏中子菜单悬停时菜单项的颜色(jsFiddle) [英] Changing the color of a menu item on hover of a submenu in a sidebar (jsFiddle)

问题描述

我在为网站处理的侧边栏中的子菜单上悬停时无法更改菜单项(.category)的颜色.如您在下面的jsFiddle示例中所见，当用户将鼠标悬停在类别上时，将打开一个子菜单，而当用户将鼠标悬停在一个子菜单项上时，其悬停颜色为橙色.我想在子菜单项上保持橙色.同时，我希望在子菜单打开时将菜单项(类别)的颜色更改为浅蓝色.

I am having trouble changing the color of a menu item (.category) on hover of a submenu in a sidebar that I am working on for my website. As you can see in the jsFiddle exmaple below, when a user hovers over a category, a submenu opens up, and when a user hovers a submenu item the hover color is orange. I would like to keep that orange on hover for the submenu items. At the same time, I would like the menu item (category) color to change while the submenu is open, to a light blue.

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

I tried using css alone to accomplish this but the hover colors change for all children, which is not what I want. I'd appreciate any help in resolving this, as this is an ongoing issue that I have been trying to figure out.

到目前为止我尝试过的事情:

What I tried so far:

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

jsfiddle:

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

推荐答案

问题是链接具有高优先级的默认蓝色.要更改颜色，您实际上需要在链接上进行更改.我将其放在hover()代码中，并且有效:

The problem is that links have a high-priority default blue color applied. To change the color, you need to actually change it on the link. I put this in the hover() code, and it worked:

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

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

This finds the first child link of the li.category tag (further child links are the actual menu items) and changes the color to light blue (#2B60DE). In the mouseleave() code, put that same code, but leave the actual value blank, like so:

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

这篇关于更改侧边栏中子菜单悬停时菜单项的颜色(jsFiddle)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！