html - 将鼠标悬停在星星上时出现星级评分 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;
  ...
}