CSS：级联：悬停？

Question

嘿，我有一些样式要做，但我不知道如何使用没有 js 的常规 css 来做。

我的html是这样的：

雪崩 尼尔·斯蒂芬森 &lt/div>

而我的css是这样的：

div.book span.title { 颜色：黑色； } div.book span.author { 颜色：灰色； } div.book:hover { 颜色：橙色； }

当 div 悬停在上面时，我希望作者和标题都为橙色，即使我通常将它们设置为不同的颜色。 span 不会从 div 继承 color 属性，因为它们有自己的颜色集，并且 span 的悬停不会激活，除非您将鼠标悬停在 span 本身上。我可以在不使用 javascript 的情况下执行此操作吗？

【问题讨论】：

• div.book:hover span.title { color: orange; } 不起作用吗？您确定 div 位于其下方吗？
• @Mark，你完全正确，div.book:hover span { color: orange;效果很好，我很厚。非常感谢！
• 除非你真的需要，你不应该在div.class中指定div。它只是增加了 CSS 特性的膨胀。在某些情况下，这是有道理的（当您遇到 span.title 和 div.title 之类的问题时）。

Answer 1

div.book span.title { color: black; }
div.book span.author { color: gray; }
div.book:hover, div.book:hover span.title, div.book:hover span.author
{
    color: orange; 
}

Answer 2

规则div.book:hover 不会覆盖div.book span.title 和div.book span.author，因为后者的规则比前者更具体。您将需要执行以下任一操作：

div.book span.title { color: black; }
div.book span.author { color: gray; }
div.book span.author:hover, div.book span.title:hover { color: orange; }

或：

div.book span.title { color: black; }
div.book span.author { color: gray; }
div.book:hover { color: orange !important; }

除非绝对必要，否则我通常建议不要使用!important。

另外，我要提醒的是，这是 CSS3 并且只在现代浏览器版本中实现。

编辑： 这是第三种选择：

div.book:hover span.title, div.book:hover span.author { color: orange; }