父项目悬停时，将子元素设为白色

Question

有没有办法在没有javascript的情况下使用CSS？

我有导航。锚元素中的文本是黑色的。在行项目悬停时，订单项会变为橙色。此时我想将子锚元素文本更改为白色。

我现在拥有的是锚标记规则，当悬停时为白色。由于锚点小于订单项，这意味着，只有当鼠标悬停在锚点标记所在的中心上方时，将鼠标悬停在订单项上并不会立即将文本更改为白色。

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

换句话说，我想根据它的父元素的悬停状态来改变一个元素。

Answer 1

无法使用CSS选择器定位父元素。您可以在行项目中添加:hover规则以更改其背景颜色。同时，添加一个额外的规则，在悬停时更改子链接的颜色：

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

Demo

Answer 2

你可以试试这个。给a代码display:block;将获取li元素的全宽。

#menu li a:hover {
    background: #FC6;/*added*/
}
#menu a {
    color: #000;
    dispaly:block;/*added*/
}

<强> DEMO