JQuery，CSS - 创建评级系统

Question

我有以下代码。 HTML：

<div class="zuta_strana_ocena">
<p>Vaša ocena</p>
<div class="zuta_strana_rating">
<span role="rating" id="star_1"></span>
<span role="rating" id="star_2"></span>
<span role="rating" id="star_3"></span>
<span role="rating" id="star_4"></span>
<span role="rating" id="star_5"></span>
</div>
</div>

CSS：

.zuta_strana_ocena {float: left; width: 65%; margin-top: 10px}
.zuta_strana_ocena p {float: left}
.zuta_strana_rating {height: 30px; width: 180px; display: block; float: left;}
span[role=rating] {display: block; width: 30px; height: 30px; float: left; margin-right: 5px;background: url(../img/resursi/rating.png) 0 0 no-repeat; cursor: pointer}
span[role=rating]:first-of-type {margin-left: 5px}
.star, .on {background: url(../img/resursi/rating.png) 0 -49px no-repeat !important; }

JQuery的：

ocena.hover(
function(){
$(this).prevAll().andSelf().addClass('star')},
function(){
$(this).parent().children().removeClass('star');
}
); 

ocena.on('click', function(){
d_o = $(this).index() + 1;
$(this).parent().children().removeClass('on');
$(this).prevAll().andSelf().addClass('on')          
});

目前它工作正常，如果我想用相同的图片创建所有开始，但这是我不需要的。每个明星都必须有独特的形象，但目前我不知道解决方案。我试过这个CSS：

#star_1 .star, #star_1 .on {background: url(../img/resursi/rating.png) 0 -49px no-repeat !important; }

但它不起作用（没有任何事情发生）。我需要做些什么才能让它发挥作用？

JSFiddle链接： http://jsfiddle.net/j5vce/

Answer 1

http://jsfiddle.net/j5vce/7/

试试这个 我给了他们每个瓷砖的课程 并为他们添加了背景

*编辑 （你甚至可以指向它们的ID） *编辑1。

链接现在显示1个当前状态然后 3个独特的州

Answer 2

您可以尝试Simon Pertersen的建议。但最好使用像下面那样的Image Sprite;

您可以将其指定给span的父选择器，并可能更改图像位置。在这种方法中，星星将加载快速，因为图像已经预加载。