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

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