html页面上不断掉星星,html – 悬停在星星上时的星级评分css问题

当我徘徊在一些星星上时,我有一个奇怪的问题.明星效应应该正常工作,当用户徘徊第二颗星时,第一颗星也应该被填充,当用户在第三颗星上徘徊时,应该也填充前一颗星.

的jsfiddle：

HTML

• 1
• 2
• 3
• 4
• 5

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;

}