0

次のコードがあります。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/

4

2 に答える 2

1

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

これを試して、各タイルにクラスを与え、背景を追加しました

*編集済み (それらの ID を指定することもできます) *編集済み 1.

リンクには現在の状態が 1 つ表示され、次に固有の状態が 3 つ表示されるようになりました

于 2012-08-13T10:59:59.223 に答える
1

Simon Pertersen による提案を試すことができます。ただし、以下のようなイメージ スプライトを使用することをお勧めします。

ここに画像の説明を入力

spanこれをの親セレクターに割り当てて、画像の位置を変更することができます。この方法では、画像が既にプリロードされているため、スターは高速にロードされます。

于 2012-08-13T11:16:15.863 に答える