css：悬停对当前和上述所有元素的影响-css:hovereffectoncurrentandallelementsabove

Is there any way to style this list using pure css so all elements above my cursor will be highlighted ?

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

    
first
    

        
first.first
        

            
first.first.first
            
second.second.second
            
third.third.third
        
        
second.second
        
third.third
    
    
second
    
third

I want to style this list this way: When I hover cursor over "second" everything will be highlighted expect third. When i go over third.third everything will be highlighted expect second and third etc...

我想用这种方式设置这个列表的样式：当我将光标悬停在“秒”上时，所有内容都会突出显示为第三个。当我超过第三名时。第三和第三等所有东西都会突出显示...

I was able to achieve something very similar as described here css :hover effect on current and previous elements however I want something slightly different

我能够实现与此处描述的非常相似的东西css：悬停效果当前和之前的元素但是我想要稍微不同的东西

Thanks

谢谢

1 个解决方案

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