Numero stellare del rating a stelle quando si sorvola il cielo sopra le stelle

Question

Sto avendo un problema strano quando si muove su alcune stelle. L'effetto stella dovrebbe funzionare normalmente, quando l'utente alza la seconda stella, la prima stella deve essere riempita anche, quando l'utente si posiziona sulla terza, allora devono essere riempiti anche quelli precedenti.

Jsfiddle:

http://jsfiddle.net/tkh2czee/

HTML

<ul class="star-rating"> 
    <li><a id="1" title="1 star out of 5" class="one-star starz">1</a></li> 
    <li><a id="2" title="2 stars out of 5" class="two-stars starz">2</a></li> 
    <li><a id="3" title="3 stars out of 5" class="three-stars starz">3</a></li> 
    <li><a id="4" title="4 stars out of 5" class="four-stars starz">4</a></li> 
    <li><a id="5" title="5 stars out of 5" class="five-stars starz">5</a></li> 
</ul> 

CSS

.star-rating{ 
    list-style:none; 
    margin: 0 auto; 
    padding:0px; 
    width: 250px; 
    height: 50px; 
    position: relative; 
    background: url(http://s11.postimg.org/cfr9p1xjz/alt_star.png) top left repeat-x;  
} 

.star-rating li{ 
    padding:0px; 
    margin:0px; 
    float: left; 
} 
.star-rating li a{ 
    display:block; 
    width:50px; 
    height: 50px; 
    text-decoration: none; 
    text-indent: -9000px; 
    z-index: 40; 
    padding: 0px; 
} 
.star-rating li a:hover{ 
    background: url(http://s11.postimg.org/cfr9p1xjz/alt_star.png) left bottom; 
    z-index: 4; 
    left: 0px; 
} 
.star-rating a.one-star{ 
    left: 0px; 
} 
.star-rating a.one-star:hover{ 
    width:50px; 
} 
.star-rating a.two-stars{ 
    left:50px; 
} 
.star-rating a.two-stars:hover{ 
    width: 100px; 
} 
.star-rating a.three-stars{ 
    left: 100px; 
} 
.star-rating a.three-stars:hover{ 
    width: 150px; 
} 
.star-rating a.four-stars{ 
    left: 150px; 
} 
.star-rating a.four-stars:hover{ 
    width: 200px; 
} 
.star-rating a.five-stars{ 
    left: 200px; 
} 
.star-rating a.five-stars:hover{ 
    width: 250px; 
} 
.star-rating li.current-rating{ 
    background: url(http://s11.postimg.org/cfr9p1xjz/alt_star.png) left center; 
    position: absolute; 
    height: 50px; 
    display: block; 
    text-indent: -9000px; 
    z-index: 1; 
} 

Answer 1

Aggiungere un posizionamento ai vostri stelle, in questo modo dovrebbe funzionare. http://jsfiddle.net/tkh2czee/2/

.star-rating li a{ 
    position: absolute; 
    ... 
}