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

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

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

#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