css：对当前元素和上面所有元素的悬停效果答案

【问题标题】：css :hover effect on current and all elements abovecss：对当前元素和上面所有元素的悬停效果
【发布时间】：2015-10-05 20:05:10
【问题描述】：

有没有办法使用纯 css 设置此列表的样式，以便突出显示光标上方的所有元素？

<ul>
    <li>first</li>
    <ul>
        <li>first.first</li>
        <ul>
            <li>first.first.first</li>
            <li>second.second.second</li>
            <li>third.third.third</li>
        </ul>
        <li>second.second</li>
        <li>third.third</li>
    </ul>
    <li>second</li>
    <li>third</li>
</ul>

我想以这种方式设置此列表的样式：当我将光标悬停在“第二个”上时，所有内容都会突出显示，除了第三个。当我超过 third.third 时，所有内容都会突出显示，预计第二个和第三个等...

我能够实现与此处描述的非常相似的东西 css :hover effect on current and previous elements 但是我想要一些稍微不同的东西

谢谢

【问题讨论】：

没有。你需要javascript/jquery
OP 在尝试之前应该学习如何嵌套列表。

标签： css

【解决方案1】：

我们无法返回，但可以使用~ 继续前进，因此我们可以突出显示所有内容并关闭当前元素之后的所有内容的突出显示。

ul li:hover {
    background: red;
}
ul li:hover ~ li,
ul li:hover ~ li li {
    background: none;
}

JSFiddle

【讨论】：