選擇同一父母的所有在前孩子

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; 
}