我可以从悬停的项目继承背景颜色吗？

Question

HTML

<ul>
    <li class="first active">Test</li>
    <li class="second">Test</li>
</ul>

CSS

ul li {
    padding: 10px
}

.first:hover {
    background-color: red;
}

.second:hover {
    background-color: grey;
}

.active {

}

我想显示具有相同状态的.active项：hover。我的观点是继承活动项目的li颜色。

这有什么办法吗？

http://jsfiddle.net/o3c6js03/

Answer 1

你所要求的是不可能的; inherit值将属性设置为与父元素的对应属性相同。

如果您要为每个:hover的{​​{1}}状态写出单独的样式，那么只需将li类添加到同一规则中 - CSS规则可以有多个选择器，你只需要用逗号分隔它们。

例如：

.active

Answer 2

也许你想实现这个目标：

.first:hover,
.first.active {
    background-color: red;
}

.second:hover,
.second.active {
    background-color: grey;
}