CSS /更少/薩斯 - 匹配每一個兄弟姐妹以前當：懸停

Question

在此代碼：

<div id="Container"> 
    <span class='first'>First</span> 
    <span class='second'>Second</span> 
    <span class='third'>Third</span> 
</div> 

我想改變顏色，:hover時。

1. IF（.first:hover）THEN .first { color: red; }
2. IF（.second:hover）THEN .first, .second { color: red; }
3. IF（.third:hover）THEN .first, .second, .third { color: red; }

沒有JS這可能嗎？我可以接受CSS黑客:)

---

可能的答案：

1. @panther的回答

---

更難版本：

<div id="Container"> 
    <span class='first' style='color: red'>First</span> 
    <span class='second' style='color: green'>Second</span> 
    <span class='third' style='color: blue'>Third</span> 
</div> 

1. IF（.first:hover）THEN .first { color: pink; }
2. IF（.second:hover）THEN .first, .second { color: pink; }
3. IF（.third:hover）THEN .first, .second, .third { color: pink; }

---

答案：

1. @Armfoot的答案似乎不錯:)

Answer 1

我想通了與@each in SASS的方式設在panther's answer：

$containerID: FirstSecondThird-Container; 
##{$containerID}:hover span {color:pink} 
@each $spanclass, $spancolor in (first, red), (second, green), (third, blue) { 
    ##{$containerID} span:hover ~ .#{$spanclass}, .#{$spanclass} { 
    color: #{$spancolor}; 
    } 
} 

這是一個有點短，但這裏的結果（生成CSS）：

#FirstSecondThird-Container:hover span { 
 
    color: pink; 
 
} 
 
#FirstSecondThird-Container span:hover ~ .first, .first { 
 
    color: red; 
 
} 
 
#FirstSecondThird-Container span:hover ~ .second, .second { 
 
    color: green; 
 
} 
 
#FirstSecondThird-Container span:hover ~ .third, .third { 
 
    color: blue; 
 
} 
 

 
span {display: block;} /* this line was not generated, it's just to place them vertically */

<div id="FirstSecondThird-Container"> 
 
    <span class='first'>First</span> 
 
    <span class='second'>Second</span> 
 
    <span class='third'>Third</span> 
 
</div>

哪有類似的規則panther's fiddle。

尼斯挑戰123qwe :)

Answer 2

在CSS中沒有以前的兄弟選擇器，但是......有時候可以使用已知的選擇器來完成。有時。

<style> 
    span {color: #000; display: block;} 
    div:hover span {color: #f00;} 
    span:hover ~ span {color: #000} 
</style> 

<div id="FirstSecondThird-Container"> 
    <span class='first'>First</span> 
    <span class='second'>Second</span> 
    <span class='third'>Third</span> 
</div> 

https://jsfiddle.net/45zLdcvr/

它與blockspan S（飄來，當然）。與span s有默認display: inline它會閃爍，當你將盤旋div跨度之間的空間。

UPDATE：
你更新時，每個跨度有自己的顏色的問題，那麼它可能是：

span {color: red} 
.second {color: green} 
.third {color: blue} 

span {display: block;} 
div:hover span {color: pink;} 
span:hover ~ .second {color: green} 
span:hover ~ .third {color: blue} 

https://jsfiddle.net/45zLdcvr/1/

Answer 3

這是我認爲可以做你要找什麼實現整齊

@mixin color_on_hover($class){ 

@if $class==first {span:nth-of-type(1){color:red;}} 
@else if $class==second {span:nth-of-type(1), span:nth-of-type(2){color:red;}} 
@else if $class==third {span:nth-of-type(1), span:nth-of-type(2), span:nth-of-type(3){color:red;}} 

} 
span.first:hover{ 
@include color_on_hover(first); 
} 
span.second:hover{ 
@include color_on_hover(second); 
} 
span.third:hover{ 
@include color_on_hover(third); 
} 

希望它有幫助！