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上时，标题和作者都变成橙色，即使它们通常是不同的颜色。由于它们已经有自己的颜色设置，所以这些span元素不会继承div元素的颜色属性，并且只有当你悬停在span元素上时，它们才会触发hover事件。我能否在不使用javascript的情况下实现这个效果？

- Zach

---

div.book:hover span.title { color: orange; } 不起作用吗？你确定 div 位于其下方吗？ - Mark Baijens

@Mark，你说得完全正确，div.book:hover span { color: orange; } 很好用，我太蠢了。非常感谢！ - Zach

除非你真的需要，否则不应该在div.class中指定div。这只会增加CSS特异性的负担。在某些情况下是有意义的（例如当你遇到span.title和div.title之类的问题时）。 - zzzzBov

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

- hunter

---

div.book:hover, div.book:hover span.title, div.book:hover span.author { color: orange; } 可以简化为：div.book:hover span.title, div.book:hover span.author { color: orange; }，去掉第一个不必要的 div.book:hover。 - Metagrapher

最有可能的是，但如果div.book中还有其他文本怎么办？不过你说得对。 - hunter

你说得对，如果你把它拿掉，它不会在悬停时将div中的其他文本样式设置为橙色。我更喜欢在div本身上使用:hover，比我最初想到的更好。这样它就可以正确地改变。好主意。 - Metagrapher

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

- Metagrapher