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的懸停功能修改

回答

相關問題