CSS/Meno/Sass - Partita di ogni fratelli precedenti, quando: hover

Question

In questo codice:

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

Voglio cambiare il colore, quando :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; }

È questo possibile senza JS? Posso accettare CSS Hacks :)

---

Possibili risposte:

1. @panther 's risposta

---

Versione più difficile:

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

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

---

Risposte:

1. risposta @Armfoot s' sembra sii buono :)

Answer 1

ho scoperto il modo con @each in SASS sede a 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}; 
    } 
} 

E 'un po' più breve, ma ecco il risultato (generato 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>

Quale ha regole CSS simili a panther's fiddle.

bella sfida 123qwe :)

Answer 2

In CSS non esiste un precedente selettore di pari livello, ma ... a volte è possibile farlo utilizzando selettori conosciuti. A volte.

<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/

Funziona con blockspan s (di galleggiare, ovviamente). Con span s ha il valore predefinito display: inline lampeggerà quando si posizionerà lo spazio div nello spazio tra le span.

UPDATE:
È aggiornato la questione quando ogni campata ha il proprio colore, allora potrebbe essere:

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

Questo è quello che penso possa fare quello che stai cercando per ottenere ordinatamente

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

Spero che aiuti!