html - CSS:级联:悬停？

Question

嘿，我有一些样式要做，但我不确定如何使用没有 js 的常规 css 来完成它。

我的html是这样的:

    <div class="book">
        <span class="title">Snow Crash</span>
        <span class="author">Neal Stephenson</span>
    </div>

我的 CSS 是这样的:

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

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

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; 
}