CODEWITHSUNDEEP
jquerycssmouseover
sdvnksv
sdvnksv

Reputation: 9668

Change style of the list items located before the hovered one

$('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/

Above is the code to toggle between star-o and star classes of all elements previous to the hovered one. However, I cannot make it revert back to star-o if another item was hovered after. Please see the demo to get an idea. Any help?

Upvotes: 2

Views: 56

Answers (1)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Try,

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

Upvotes: 2

Related Questions