jQuery的悬停功能修改

我已经实现悬停功能，这样，当你将鼠标悬停在一个明星这和以前所有的兄弟姐妹都应用到他们addclass方法jQuery的悬停功能修改

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

在此刻发生的是，如果我将鼠标悬停在说第四颗星（有5颗），那么真理和所有的兄弟姐妹都会应用这个类。

我想要实现的是，当我离开悬停状态时，li会回到原来的状态，或者更好的悬停在鼠标的流动之后，所以当我将鼠标悬停在li上时，希望是有道理的）

我已经放在一起Jsfiddle但由于某种原因图像不显示，即使路径是公开的？

来源

2013-02-20 Richlewis

感谢所有，没想到刚添加其他功能....将从现在虽然 – Richlewis 2013-02-20 14:29:23

的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

来源

2013-02-20 14:26:55

谢谢，多数民众赞成在 – Richlewis 2013-02-20 14:32:08

poo，它现在打破了我的点击方法:(不是你的错，虽然，现在别的东西要看我 – Richlewis 2013-02-20 14:35:01

你可以这样做：

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

注意，我换成andSelf这是由addBack弃用。如果您使用旧的jQuery版本，您可以让andSelf。

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

Demonstration

来源

2013-02-20 14:25:52

上解决的有趣的方式图像问题:) – Richlewis 2013-02-20 14:30:43

Unicode是许多常见界面问题的资产充满:) – 2013-02-20 14:31:27

我喜欢你的使用unicode ...有没有危险它可能不会显示在iPad等...有没有安全的回退？ – 2013-02-20 14:34:02

$(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-20 14:26:03

当从列表中移除时，这会使您的明星数量减少 – 2013-02-20 14:30:43

从星星班后清除你的鼠标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'); 
    }); 
    });

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

来源

2013-02-20 14:26:28 CraigTeegarden

如果您将鼠标从列表中移出（而不是另一个“li”），这将使星星显示出来 – 2013-02-20 14:29:55

优秀点，更新到修复 – CraigTeegarden 2013-02-20 14:31:09

jQuery的悬停功能修改

回答

相关问题