Question

I m working on making a star-voting system. There are 5 stars, those lighted up are showing the current average star voted. When you mouseover a star, lets say number 4 I wish to make the 4 from right lighten up, if you mark over 2, 2 stars should mark up from the right and so on.. if full 5 stars all stars lights up. the stars are in css classes .iconFavorite and the lighten up is .iconFavorite_hover, so my code looks like this when 3:

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

如果您退出retado.dk/videos.php？id=905你可以看到绿色的大星星试着用鼠标滑过它们，选定数量的星星就会亮起来。

我该怎么做？

以下是我当前没有jquery的代码：http://jsfiddle.net/8vzCC/1/

Answer 1

Does this work? http://jsfiddle.net/8vzCC/33/ It removes everything after it :) This should work!

编辑：新版本，应按您希望的方式工作：）

Answer 2

下面是一个工作示例：Fiddle你需要一个第三类才能“永久”点亮星星。

以下是使其工作的jquery。

$(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 );
    });
});

To provide the extra functionality you are looking for I made some changes: Updated fiddle You can see there is a new class and extra hover changes.

Answer 3

Can t you give all the div s an ID? And then let jQuery do somthing like: On hover --> this.id --> select every div with id lower or equal to this.id --> set class="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");
});

这也删除了下一颗星的悬停类（因此，如果它们最初鼠标悬停在第四颗星上，然后转到第二颗星，则第三颗星和第四颗星不应突出显示

友情链接