更改位于悬停项之前的列表项的样式答案

【问题标题】：Change style of the list items located before the hovered one更改位于悬停项之前的列表项的样式
【发布时间】：2014-03-18 12:01:17
【问题描述】：

$('i').on("mouseover", function () {
    var currentId = $(this).attr('id');
    $('i').each(function(i) {
        var prevId = currentId - 1;
        $('i#'+prevId).removeClass("fa-star-o");
        $('i#'+prevId).addClass("fa-star");
        currentId = prevId;
    });
    $(this).removeClass("fa-star-o");
    $(this).addClass("fa-star");
    return false;
});

http://jsfiddle.net/ua85L/1/

上面是在悬停元素之前的所有元素的star-o和star类之间切换的代码。但是，如果另一个项目之后悬停，我无法让它恢复为 star-o。请查看演示以获得一个想法。有什么帮助吗？

【问题讨论】：

标签： jquery css mouseover

【解决方案1】：

试试，

var i = $('i')

i.on("mouseover", function () {

    i.removeClass("fa-star").addClass('fa-star-o');
    i.filter(':lt(' + (i.index($(this)) + 1) + ')').toggleClass("fa-star-o fa-star");

});

DEMO

【讨论】：

效果很好，但是如果悬停一次，第一颗星将永远不会回到star-o。