Html 如何将第n个子项与：悬停一起使用以设置多个子项的样式？

JS Fiddle更易于调试：

我正在尝试设置这个css，这样当你将鼠标移到九、九和以下位置时，它们的背景颜色就会改变

鼠标5、5及以下的颜色已更改。你明白了。我不知道如何将第n个子（-n+#）选择器与：hover一起使用

ol.motivationBox .motivationBars li:nth-child(10):hover:nth-child(-n+9) {
background-color: #008cba;
}

这段代码无法正常工作。什么格式不正确？

由于当前无法横穿DOM树，这似乎是纯CSS中唯一可能的事情

基本上，通用同级组合器

~

，允许我们访问所有后续的同级元素

。。如果要使用jQuery并选择前面的同级元素，可以使用以下方法：

---

这完全有效！要让它从左到右运行吗？那太好了。你能再帮我一次忙吗？我对Jquery不是非常熟悉。是否有一种方法可以添加到该函数中，以便在用户单击其中一个列表项时，即使移除鼠标焦点，该类仍将保持设置状态？我喜欢它的功能，它是我想要的完美，只需要点击一下就可以选择这些类。是的！但是有没有办法保持悬停功能呢。所以它的功能与第一个示例类似，除非单击一个LI，然后它将保持活动类，尽管鼠标被关闭？（如果我解释得不好，我深表歉意）因为这只是从右到左的功能，这不是我的目标，我想我可以使用JS。

ol.motivationBox .motivationBars:hover ~ .motivationBars,
ol.motivationBox .motivationBars:hover {
    background-color: #008cba;
}

$('.motivationBox .motivationBars').hover(
    function(){
        $(this).prevAll().andSelf().addClass('active');
    },
    function(){
        $('.active').removeClass('active');
    }
);