父子菜單項改變背景當孩子被徘徊

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