html - 悬停父项时将子元素设为白色

Question

有没有办法不用 javascript 而只使用 CSS 来做到这一点？

我有一个导航。 anchor 元素中的文本是黑色的。将鼠标悬停在行元素上时，行元素变为橙色。那时我想将子 anchor 元素文本更改为白色。

我现在拥有的是悬停时为白色的 anchor 标记规则。因为 anchor 小于订单项，这意味着将鼠标悬停在订单项上不会立即将文本更改为白色，只有当鼠标悬停在 anchor 标记所在的中心时才会发生这种情况。

我可以发布 html，但我认为没有必要。是吗？希望我说得有道理并且我的问题很清楚。

换句话说，我想根据父元素的悬停状态更改元素。

Answer 1

无法使用 CSS 选择器定位父元素。您可以改为向订单项添加 :hover 规则以更改其背景颜色。同时，添加一条附加规则，在悬停时更改子链接的颜色:

li:hover {
    background: orange;
}
li:hover a {
    color: white;
}

Demo