CSS :hover effect on current and all elements above

Question

有什么方法可以使用纯 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但是我想要一些稍微不同的东西

谢谢

Answer 1

我们不能后退，但我们可以通过 ~ 前进，所以我们可以突出显示所有内容并关闭当前元素之后的所有内容的突出显示。

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

JSFiddle