jQuery的悬停功能修改

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弃用。如果您使用旧的jQuery版本，您可以让andSelf。

您可能还可以通过我如何规避了形象问题感兴趣......

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'); 
    }); 
    }); 

已更新：在鼠标移除时删除所有星星