如何使用带有：hover的nth-child来设置多个子元素的样式？

Question

JS Fiddle，可简化调试过程： http ： //jsfiddle.net/GregsFiddle/WyC7Y/1/

我正在尝试设置此CSS，以便当您将鼠标悬停在9、9及以下时，其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唯一的可能。

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

此处更新示例

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

..如果您想使用jQuery并选择前面的兄弟元素，则可以使用以下方法：

这里的另一个例子

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