I am having a strange problem hanging on some stars. The star effect should work fine when the user is pointing the second star, the first star should also be filled, when the user is pointing at the third, and then the previous one should also be 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; }
source share