css - 试图在悬停时嵌套 css 选择器

Question

我想在发生悬停时运行它 - 将内部类的背景颜色更改为灰色，这可以用 css 完成吗？

.thumbnail:hover {
  border: 2px solid rgba(156, 162, 153, 1);
  .labels .inner {
    background-color: rgba(156, 162, 153, 1);
  }
}

Answer 1

当然可以:

.thumbnail:hover {
    border: 2px solid rgba(156, 162, 153, 1);
}

.thumbnail:hover .labels .inner{
    background-color: rgba(156, 162, 153, 1);
}

如果您使用 SASS，您的样式也可以正常工作/LESS , 它将把那些样式预编译到这个样式中。

另外，作为 @Paulie_D说，这取决于你的标记。这将适用于以下场景(其中之一):

<div class="thumbnail">
    <div class="labels">
        <div class="inner">Foobar</div>
    </div>
</div>

Working fiddle