css - 当孩子悬停在父菜单项上时更改背景

Question

我正在开发一个 WordPress 网站，当我构建一个两层深菜单时，父元素会在子元素悬停时突出显示默认的蓝色。在此期间我可以做些什么来更改父元素的背景？

例如，请参见此图像

#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

因此，您想在子项悬停时更改父项的颜色。不幸的是，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 实现这一点，但我真的不建议这样做。这个不干净。孩子悬停时更改父母

Answer 3

一个简化的工作 jQuery 解决方案：

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