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

【问题标题】：Parent menu item changes background when child is hovered on当孩子悬停在父菜单项上时更改背景
【发布时间】：2013-04-23 14:01:57
【问题描述】：

我正在开发一个 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; }`

【问题讨论】：

向我们展示一些您一直在处理的代码？
我赞同@Andrew 的评论，如果可能的话，请给我们一个链接，指向正在发生这种情况的网站的现场演示。
不幸的是别人的代码我必须整理一下，但这里是菜单 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; }
@AndrewS。您能否将该代码添加到帖子的主体中？

标签： css wordpress menu html-lists frontend

【解决方案1】：

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

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

【讨论】：

【解决方案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 实现这一点，但我真的不建议这样做。这个不干净。 Change parent when child hover

【讨论】：

【解决方案3】：

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

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

【讨论】：