Jquery Hover函数修改

Question

我已经实现了一个悬停功能，这样当您将鼠标悬停在星星上时，该星星和所有 previous sibling 姐妹都会应用 addclass 方法

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

现在发生的情况是，如果我将鼠标悬停在第四颗星(有 5 颗)上，那么第四颗星和所有 sibling 都会应用该类。

我想要实现的是，当我离开悬停状态时，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("/image/S5T0M.png");

Working demo