Question

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

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

此刻发生的事情是，如果我徘徊在说第四颗星（有5颗），那么foruth和所有兄弟姐妹都应用了这个类。

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

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

Answer 1

你可以这样做：

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

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

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

Demonstration

Answer 2

$(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 3

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

更新：删除mouseout上的所有星星

Answer 4

<强>的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

Jquery Hover功能修改

4 个答案: