CSS颜色属性被忽略

Question

我希望文本框的颜色及其链接在悬停在其上时反转。但是，首先框的背景颜色会反转，只有当光标在文本（链接）上移动时，文本颜色才会反转。

#nav span:hover { 
  color:white; /* ignored ! */
  background-color:#687078; 
}

显然忽略color:white（因为a：悬停优先？） 如何同时更改两种颜色？

---

完整的HTML和CSS：http://jsfiddle.net/stevenvh/LvgRJ/4/

Answer 1

使用

#nav span a { color:#214275; text-decoration:none; }
#nav span:hover { background-color:#687078; }
#nav span:hover a { color:white; }

Demo

您的代码存在的问题是，当您将鼠标悬停在<span>而不是<a>时，则只应用#nav span:hover规则，而不是#nav span a:hover。您必须改为使用#nav span:hover a。

偏离主题：考虑使用童年选择器（>）而不是后代选择器，这有点慢。

Answer 2

使用选择器：

#nav span:hover,
#nav span:hover a {
    color: white;
}

当悬停a元素时，span会变为彩色;或者：

#nav span a {
    color: inherit;
}

这导致a从其父/祖先继承其颜色。