Naśladuj: najedź kursorem css za pomocą klasy css

Question

Mam serię elementów div, których używam do tworzenia danych wejściowych "ocena gwiazda". Zazwyczaj gwiazdy są szare, gdy mysz przejdzie przez jedną z gwiazd, a gwiazdy wypełnią się kolorem i że działa.

Teraz chcę klasę, która "naśladuje" zachowanie: hover i nazwałem ją active, więc kiedy umieściłem tę klasę, gwiazdy wypełniają się kolorem, ale to nie działa.

Oto kod:

HTML

<span class="rating"> 
<span class="star active"></span> 
<span class="star"></span> 
<span class="star"></span> 
<span class="star"></span> 
<span class="star"></span> 
</span> 

CSS

.rating span.star:before { 
    content: "\f005"; 
    padding-right: 5px; 
    color: #bbb; 
} 

.rating span.star:hover:before, .rating span.star.active, .rating span.star:hover ~ span.star:before { 
    color: #ffbe0d; 
} 

Oto skrzypce: http://jsfiddle.net/fuTfX/

Używam FontAwesome wyświetlać gwiazdy

Answer 1

Zapomniałaś dodać :before z zasadą .active. Zmień

.rating span.star:hover:before, .rating span.star.active, .rating span.star:hover ~ span.star:before { 
    color: #ffbe0d; 
} 

Aby

.rating span.star:hover:before, .rating span.star.active:before, .rating span.star:hover ~ span.star:before { 
    color: #ffbe0d; 
} 

Answer 2

spróbuj tego (przeniosłem kolor na :before aby tylko span):

.rating span.star { 
    color: #bbb; 
} 
.rating span.star:before { 
    content: "\f005"; 
    padding-right: 5px; 
} 

.rating span.star:hover:before, .rating span.star.active, .rating span.star:hover ~ span.star:before { 
    color: #ffbe0d; 
} 

Answer 3

Podejście Złom i wdrożenie piramidalnych pozycjonowanie bezwzględne

JSFIDDLE --->http://jsfiddle.net/5n5Xt/

HTML:

<ul> 
    <li><a href="#"><span>Rating 1 of 5</span></a></li> 
    <li><a href="#"><span>Rating 2 of 5</span></a></li> 
    <li><a href="#"><span>Rating 3 of 5</span></a></li> 
    <li><a href="#"><span>Rating 4 of 5</span></a></li> 
    <li><a href="#"><span>Rating 5 of 5</span></a></li> 
</ul> 

CSS:

ul { background: url(gray_stars.png) no-repeat; width: 120px; height: 20px; position: relative;} 
li a { display: block; position: absolute; top 0; height: 20px; left: 0; 
li:first-child a { width: 20px; z-index: 5;} 
li + li a { width: 40px; z-index: 4;} 
li + li + li a { width: 60px; z-index: 3;} 
li + li + li + li a { width: 80px; z-index: 2;} 
li + li + li + li + li a { width: 100px; z-index: 1;} 
li + a:hover {background: url(yellow_stars.png) no-repeat;} 
ul li span { display: none;} 

Jak to działa

Zasadniczo twoje gwiazdek stworzył nakładających prostokątne kształty. Pierwsza gwiazdka składa się z pudełka o wymiarach 20x20 z najwyższym indeksem Z -> tworzącym pierwszą gwiazdę i na szczycie wszystkich gwiazd. Druga gwiazda to prostokąt składający się z pierwszej gwiazdy + drugiej gwiazdy. Indeks Z sprawia, że ​​PONIŻEJ jest pierwszą gwiazdą, ale podobnie jak pierwsza gwiazda, będzie nakładać się na siebie kolejnych gwiazd. -> powtórz to dla wszystkich 5 gwiazdek, aby każda gwiazda miała region 20x20, który jest "hoverable" w danym momencie. Ponieważ każda gwiazda kotwicy jest w rzeczywistości "pełną długością" od lewej strony, jeśli najedziesz na gwiazdę 4 -> wszystkie 80px zostanie aktywowane i zobaczysz 4 złote gwiazdy. Ale kiedy idziesz do gwiazdy 3, aktywuje się tylko gwiazda 3 -> 3 gwiazdki pojawiają się.

Nadzieję, że to wyjaśnia. Zrzuciłem szybkie jsfiddle, które, mam nadzieję, ci pomoże. Użyłem zwykłych kolorów, ale widzisz, że 1-5 "żółtych" pól jest podbarwione, gdy się unosi.