Drobna pomoc CSS

<input type="radio" style="display:none" value="5" name="button" ><i class="icon-star-filled s1" name="button"></i>
<input type="radio" style="display:none" value="4" name="button" ><i class="icon-star-filled s2" name="button"></i>
<input type="radio" style="display:none" value="3" name="button" ><i class="icon-star-filled s3" name="button"></i>
<input type="radio" style="display:none" value="2" name="button" ><i class="icon-star-filled s4" name="button"></i>
<input type="radio" style="display:none" value="1" name="button" ><i class="icon-star-filled s5" name="button"></i>

.s1:hover ~ i{
    color: yellow;
}
.s2:hover ~ i{
    color: yellow;
}
.s3:hover ~ i{
    color: yellow;
}

.s4:hover ~ i{
    color: yellow;
}

.s5:hover ~ i{
    color: yellow;
}

Wyswietla to 5 gwiazdek. Po najechaniu kursorem np. na trzecią, kolor zmienia 1, 2 i 3 gwiazdka. I tu dziala wszystko.
Problem jest kiedy w kodzie HTML zamkne to w label. Nie wiem co zmienic w CSS aby znow dzialalo

<label><input type="radio" style="display:none" value="5" name="button" ><i class="icon-star-filled s1" name="button"></i></label>
<label><input type="radio" style="display:none" value="4" name="button" ><i class="icon-star-filled s2" name="button"></i></label>
<label><input type="radio" style="display:none" value="3" name="button" ><i class="icon-star-filled s3" name="button"></i></label>
<label><input type="radio" style="display:none" value="2" name="button" ><i class="icon-star-filled s4" name="button"></i></label>
<label><input type="radio" style="display:none" value="1" name="button" ><i class="icon-star-filled s5" name="button"></i></label>

LABEL:hover ~ LABEL {
  color: yellow;
}

Ale podejrzewam, że coś tu cudujesz niewspółmiernie do oczekiwanego efektu.