父子菜单项改变背景当孩子被徘徊

Question

我正在一个WordPress网站上工作，当我建立一个双层深菜单时，父元素突出显示默认的蓝色，当一个子元素被徘徊时。在这期间我能做些什么来改变父元素的背景？

See this image for example

#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; }` 

Answer 1

触发子菜单，而不是上级菜单（.dropdown-menu）的li:hover。

#access.dropdown-menu > .sub-menu li:hover { visibility: visible; display: block; } 

Answer 2

所以，你想改变父母WHILE儿童被徘徊的颜色。不幸的是，CSS中没有祖先（父）选择器。如果你必须实现这一点，你将不得不使用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'); 
}); 

有一些疯狂的巧妙的方式来实现这个使用CSS，但我真的建议反对它。这个不干净。 Change parent when child hover

Answer 3

简化工作jQuery的解决方案：

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