0

I'm working on a WordPress site, and when I build a two layer deep menu the parent element highlights the default blue color when a child element is being hovered on. What can I do to change the background of the parent element during this?

See this image for example menu image

#access .dropdown-menu li:hover > .sub-menu { visibility: visible; } 
#access .dropdown:hover > .dropdown-menu { display: block; } 
#access .dropdown-menu .dropdown-menu { background: rgba(25,25,25,0.8); } 
#access .dropdown-menu .dropdown-menu { left: 100%; top: 0; border-top: none; background: rgba(25,25,25,0.8); } 
#access .dropdown-menu .dropdown-menu li a { color: #fff; text-decoration: none; } 
#access .dropdown-menu .dropdown-menu li a:hover { color: #7ac143; }`
Milche Patern
  • 19,632
  • 6
  • 35
  • 52
Andrew S.
  • 3
  • 3
  • 3
    Show us some of the code that you have been working on? – Andrew Apr 23 '13 at 14:03
  • I second @Andrew's comment, if possible give us a link to a live demo of the site where this is happening. – Rolando Isidoro Apr 23 '13 at 14:11
  • It's unfortunately someone else's code that I have to tidy up, but here's the menu css: `#access .dropdown-menu li:hover > .sub-menu { visibility: visible; } #access .dropdown:hover > .dropdown-menu { display: block; } #access .dropdown-menu .dropdown-menu { background: rgba(25,25,25,0.8); } #access .dropdown-menu .dropdown-menu { left: 100%; top: 0; border-top: none; background: rgba(25,25,25,0.8); } #access .dropdown-menu .dropdown-menu li a { color: #fff; text-decoration: none; } #access .dropdown-menu .dropdown-menu li a:hover { color: #7ac143; }` – Andrew S. Apr 23 '13 at 14:11
  • @AndrewS. Could you add that code to the main body of your post? – Nick Tomlin Apr 23 '13 at 14:17

3 Answers3

0

Trigger the li:hover of the submenu instead of the parent menu (.dropdown-menu).

#access.dropdown-menu > .sub-menu li:hover { visibility: visible; display: block; }
totymedli
  • 29,531
  • 22
  • 131
  • 165
Nicole Gabriel
  • 1
0

So you want to change the color of the parent WHILE child is being hovered. Unfortunately, there is no ancestor(parent) selector in CSS. If you must achieve this, you would have to use Javascript.

$("#access .dropdown-menu .dropdown-menu li").hover(function() {
   $(this).parents("#access > .dropdown-menu > li").css('background', 'red');
}, function() {
   $(this).parents("#access > .dropdown-menu > li").css('background', 'blue');
});

There is some insanely ingenious way to achieve this using CSS, but I really advise against it. It's dirty. Change parent when child hover

Community
  • 1
  • 1
Jay Na
  • 807
  • 2
  • 9
  • 20
0

A simplified working jQuery solution:

http://jsbin.com/ojikix/1/edit

webketje
  • 10,376
  • 3
  • 25
  • 54