Star rating css issue when hovering over stars

I am having an odd issue when hovering on some stars. The star effect should work normally, when user hovers second star, first star should be filled also, when user hovers on the third then previous ones should be also filled. 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; } ```