當星空懸停時，星級評級爲css問題

Question

我在懸停在某些星星上時有一個奇怪的問題。星星效果應該正常工作，當用戶懸停第二顆星時，第一顆星也應該填充，當用戶懸停在第三時，以前的星星也應該填充。

的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

添加定位到你的星星，這樣它應該工作。 http://jsfiddle.net/tkh2czee/2/

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