html - 当我悬停孩子 il 时，父母 ul 应该改变

Question

我正在为 Wordpress 模板创建一个下拉菜单，并且我希望主菜单项具有与子项悬停时相同的颜色。我在这里发现了许多关于堆栈溢出的类似问题并尝试了他们的解决方案，但它们似乎不适用于我的情况。

我认为解决方案必须是：

parent:hover child { ... }

它在这里工作。

我尝试对我的代码做同样的事情（请参阅最后一个 CSS 选择器），但它在这里不起作用。

Answer 1

从以下位置更新您的 CSS：

#menu ul li a:hover {
    background-color: #006699;
    color: #FFFFFF;
}

到

#menu ul li:hover a {
    background-color: #006699;
}
#menu ul li a:hover {
    color: #FFFFFF;
}

更新了jsFiddle上的示例。

Answer 2

您可以通过将小提琴中的最后一个 CSS 声明替换为以下内容来获得您想要的效果：

.menu ul li:hover > a {
    background-color: #006699;
    color: #fff !important;
}