如何使用nth-child：hover来设置多个孩子的风格？

Question

JS小提琴，更容易调试： http://jsfiddle.net/GregsFiddle/WyC7Y/1/

我正在尝试设置这个css，所以当你将鼠标悬停在九个，九个及以下时，会改变它们的bg颜色。

鼠标悬停5，以及5及以下颜色已更改。你明白了。我不知道如何使用nth-child（-n +＃）选择器：hover。

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

这段代码无效。我格式错误了什么？

Answer 1

由于当前无法横向移植DOM树，因此这似乎是纯CSS中唯一可行的。

基本上，通用兄弟组合器~允许我们访问所有后续兄弟元素。

UPDATED EXAMPLE HERE

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

..如果你想使用jQuery并选择前面的兄弟元素，你可以使用它：

ALTERNATIVE EXAMPLE HERE

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