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继承color属性，因为它们有自己的颜色设置，并且跨度的悬停不会激活，除非您将鼠标悬停在跨度本身上。我可以不使用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; 
}

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

CSS：级联：悬停？

2 个答案: