jQuery/css：選択した星の数が点灯する

Question

私はスター投票システムの作成に取り組んでいます。 5つの星があり、明るいものは現在の平均星が投票していることを示しています。あなたがマウスオーバーして星をつけたら、4番の数字を言うことができます。4番を右から明るくしたい、2番をマークすると2番の星は右からマークしなければなりません。 星は、CSSクラス.iconFavoriteにあるので、私のコードは次のようになり、.iconFavorite_hoverが明るくとき3：

<div class="iconFavorite_hover"></div> 
<div class="iconFavorite_hover"></div> 
<div class="iconFavorite_hover"></div> 
<div class="iconFavorite"></div> 
<div class="iconFavorite"></div> 

あなたは大きな緑の星がそれらをマウスオーバーしてみてください見ることができますretardo.dk/videos.php?id=905チェックアウトする場合は、選択された量の星が点灯します。

どうすればいいですか？ http://jsfiddle.net/8vzCC/1/

Answer 1

んを強調すべきではありませんこの仕事？http://jsfiddle.net/8vzCC/33/ それはそれの後のすべてを削除:)これは動作するはずです！

EDIT：新バージョン、あなたはそれが仕事をしたいように動作するはずです:)

Answer 2

あなたはすべてのdivのIDです与えることはできません：

はここでjQueryを使って私の現在のコードのjsfiddleですか？ そして、jQueryを次のようにしましょう： ホバーで - > this.id - > 'this.id'以下のidを持つすべてのdivを選択 - > set class = "IconFavorite_Hover"？

Answer 3

ここに実例があります：Fiddle「永久」ライトアップの星には3番目のクラスが必要です。

ここでは動作させるためのjqueryです。あなたは、新しいクラス、余分なホバー変更があることがわかります Updated fiddle：あなたは私を探している余分な機能を提供するために

$(function() { 
    $('.icon').mouseover(function() { 
     $(this).addClass('iconFavorite_hover'); 
     $(this).prevAll('.icon').addClass('iconFavorite_hover'); 
    }); 
    $('.icon').mouseout(function() { 
     $(this).removeClass('iconFavorite_hover'); 
     $(this).prevAll('.icon').removeClass('iconFavorite_hover'); 
    }); 
}); 

は、いくつかの変更を行いました。

Answer 4

$(".iconFavorite").onmouseover(function(){ 

     $(this).prevAll(".iconFavorite").add(this).addClass(".iconFavorite-hover").removeClass(".iconFavorite"); 
     $(this).nextAll(".iconFavorite-hover").addClass(".iconFavorite").removeClass(".iconFavorite-hover"); 

}).onmouseout(function(){ 
    $(".iconFavorite-hover").addClass(".iconFavorite").removeClass(".iconFavorite-hover"); 
}); 

これは、同様に次の星からのホバークラスを削除します（そう、彼らは当初、第四星にマウスを合わせ、その後、第二に行った場合、3番目と4番目の星が