选择同一父母的所有在前孩子

Question

我在<div>内有几个<span>元素。当您将鼠标悬停在一个<span>上时，它应该突出显示之前的所有<spans>以及悬停<span>。

我该如何使用CSS或jQuery来做到这一点？

jsFiddle example

我怀疑一个jQuery答案将做到以下几点，但我无法找到函数1 & 2.

1. 获取当前悬停的元素的子＃
2. 选择所有孩子最多
3. 将“悬停”类添加到他们

Answer 1

您可以用jQuery做到这一点：

$('span').hover(​​​​​function(){ 
    $(this).prevAll().addClass('hover'); 
},function(){ 
    $(this).prevAll().removeClass('hover'); 
});​ 

Demonstration

这使用prevAll选择同一div的所有前面的跨度。不需要使用当前元素的索引，但是可以使用索引函数获得它，然后使用lt选择器（$(this).sibblings(":lt("+$(this).index+")")）。当然，prevAll要简单得多。

由于注意到了elclarns，这可以在

$('span').hover(function(){ 
    $(this).prevAll().toggleClass('hover'); 
});​ 

Answer 2

缩短按照规定，我什么都看不到难在这里，我们将使用prevAll（）函数来选择所有的兄弟姐妹先前的例子基于当前项目。

$("span").hover(function(){ 
     $(this).prevAll().addClass("hover"); 

}, function(){ 
     $(this).removeClass("hover"); 
})​ 

工作示例：http://jsfiddle.net/6zm3E/1/

Answer 3

这取决于兼容性，可以使用CSS，虽然没有加入类名称：

div:hover span { 
    /* colours all descendent spans of hovered-div */ 
    background-color: #ffa; 
} 

div:hover span:hover, 
div:hover span:hover ~ span { 
    /* 'de-colours' the hovered-span, and 
     the subsequent sibling spans */ 
    background-color: #fff; 
}