1

我已经实现了一个悬停功能，这样当你将鼠标悬停在一个星上时，这个和所有以前的兄弟姐妹都有一个 addclass 方法应用于它们

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

目前发生的情况是，如果我将鼠标悬停在第四颗星（有 5 颗）上，那么第四颗星和所有兄弟姐妹都会应用该类。

我想要实现的是，当我离开悬停状态时，li 会回到原来的状态，或者更好的是悬停跟随鼠标的流动，所以当我悬停在 li 上时，应用类（希望这是有道理的)

我已经整理了一个Jsfiddle，但由于某种原因，即使路径是公开的，图像也没有显示？

4

4 回答 4

1

你可以这样做：

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

请注意，我替换andSelf了已弃用的addBack. andSelf如果你使用旧的 jQuery 版本，你可以让。

您可能还对我如何规避图像问题感兴趣...

示范

于 2013-02-20T14:25:52.563 回答
1 
$(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');
  }
 });
});
于 2013-02-20T14:26:03.030 回答
1

在鼠标JSFiddle 示例之后从星星中清除类：

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

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

于 2013-02-20T14:26:28.460 回答
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");

工作演示

于 2013-02-20T14:26:55.607 回答