Jquery Hover функция модификации

Question

Я реализовал функцию парения так, что при наведении мыши на звездочку это и все предыдущие братья и сестры имеют метод addclass к ним применяются

$(document).ready(function(){ 
$('.ratings li').hover(function(){ 
    $(this).prevAll().andSelf().addClass('goldstar'); 
}); 
}); 

Что происходит в данный момент, если я наведите курсор мыши на скажем, четвертую звезду (5), тогда истина и все братья и сестры имеют класс.

Что я хочу достичь, так это то, что когда я покидаю состояние зависания, li возвращается в исходное состояние или даже лучше наведение следует за потоком мыши, так как я нависаю над классом li, надеюсь, что имеет смысл)

Я собрал Jsfiddle, но по какой-то причине изображение не отображается, хотя путь является общедоступным?

Answer 1

Javascript

$(document).ready(function(){ 
    $('.ratings li').hover(function(){ 
     $(this).prevAll().andSelf().addClass('goldstar'); 
    // add a function for when the hover ends... 
    },function(){ 
     $(this).siblings().andSelf().removeClass('goldstar'); 
    }); 
}); 

CSS

background-image: url("http://i.stack.imgur.com/S5T0M.png"); 

Working demo

Answer 2

Вы можете сделать это:

$('.ratings li').hover(function(){ 
    $(this).prevAll().addBack().addClass('goldstar'); 
}, function(){ 
    $('.ratings li').removeClass('goldstar'); 
}); 

Обратите внимание, что я заменил andSelf который устаревшее по addBack. Вы можете оставить andSelf, если используете старую версию jQuery.

Вы также можете быть заинтересованы тем, как я обойти эту проблему образа ...

Demonstration

Answer 3

$(document).ready(function(){ 
$('.ratings li').hover(function(){ 
function() { 
    // Run on Mouse over 
    $(this).prevAll().andSelf().addClass('goldstar'); 
    }, 
    function() { 
    // Run on Mouse out 
    $(this).removeClass('goldstar'); 
    } 
}); 
}); 

Answer 4

Очистить класс от звезд после того, как мышь JSFiddle example:

$(document).ready(function(){ 
    $('.ratings li').hover(function(){ 
     $(this).nextAll().removeClass('goldstar'); 
     $(this).prevAll().andSelf().addClass('goldstar'); 
    }); 
    $('.ratings ul').mouseout(function(){ 
     $('li', this).removeClass('goldstar'); 
    }); 
    }); 

ОБНОВЛЕНО : удалить все звезды при выводе