html - 我可以从悬停元素继承背景颜色吗？

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 {

}

我想显示与 :hover 状态相同的 .active 元素。我的意思是继承事件元素的 li 颜色。

有什么办法吗？

http://jsfiddle.net/o3c6js03/

Answer 1

你问的是不可能的； inherit 值将属性设置为与父元素的相应属性相同。

如果您正在为每个 li 的 :hover 状态编写单独的样式，那么只需将 .active 类添加到相同的规则 - CSS 规则可以有多个选择器，您只需要用逗号分隔它们即可。

例如:

ul li{
    padding:10px
}
.first:hover,.first.active{
    background-color:red;
}
.second:hover,.second.active{
    background-color:grey;
}