Changing the color of a menu item on hover of a submenu in a sidebar (jsFiddle)

Question

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.

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/

score 2 · Accepted Answer · answered Jun 08 '12 at 18:01

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");

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", "");

Thank you David, this is exactly what I need. – AnchovyLegend Jun 08 '12 at 18:05 — AnchovyLegend, Jun 08 '12 at 18:05

score 0 · Answer 2 · answered Jun 08 '12 at 18:03

0

I have tried to change color on first element and it is working you can check in jsfiddle.

Further you should apply style to class and add/remove class via javascript.

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

answered Jun 08 '12 at 18:03

Imran Rashid

3,102
4
29
41

check the first element i add the class on first element only and first answer is great same technique – Imran Rashid Jun 08 '12 at 18:13

score 0 · Answer 3 · edited May 23 '17 at 12:12

0

Not a JQuery solution, but look at this answer on how to style a parent element.

Especially its second jsfiddle sample (pure css2) which does what you are looking for, I think.

edited May 23 '17 at 12:12

Community

1
1

answered Jun 08 '12 at 18:12

NGLN

41,230
8
102
186

Changing the color of a menu item on hover of a submenu in a sidebar (jsFiddle)

3 Answers3

Linked