html - CSS:级联:悬停?

标签 html css

嘿,我有一些样式要做,但我不确定如何使用没有 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 的情况下执行此操作吗?

最佳答案

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

关于html - CSS:级联:悬停?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4307174/

相关文章:

html - 在 CSS 网格内垂直对齐列表项

html - 如何有选择地居中文本?

javascript - 呈现 div 背景图像后的 jQuery 事件

html - 如何使用 'html5' 运行时直接将 plupload 实现到 s3?

html - 动画 Div 到 100% 宽度 css

jquery - 如何在拖动时使 Draggable 元素在屏幕中的所有元素之上可见?

html - 旋转图像背面的文字

javascript - NG-bind 不适用于 "<p>This is <span ng-bind= "city"></span> 城市。它因 <span ng-bind= "famous"></span> 而闻名。</p>”

Javascript/Css 导航未显示在仅在 ie 中准备就绪的 jquery 文档中

javascript - 使用 JS 关闭多个模态框