html - 将鼠标悬停在星星上时出现星级评分 css 问题

在某些星星上悬停时，我遇到了一个奇怪的问题。星星效果应该可以正常工作，当用户悬停第二颗星时，第一颗星也应该被填充，当用户悬停在第三颗时，前一颗也应该被填充。

fiddle :

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;
}

最佳答案

为您的星星添加一个定位，这样它就可以工作了。 http://jsfiddle.net/tkh2czee/2/

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

关于html - 将鼠标悬停在星星上时出现星级评分 css 问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27079817/