How to select all li greater than that the cursor hover it?

Question

Hi, all! I want to change css color of all li elements that greater than that the cursor I hover. To be clear I give an example: Suppose I have 10 li - elements in an unordered-list (ul - element).When I hover over 5th element I want that all elements from 5 to 10 will be changed css color (first 4 elements remains black be default). My code is this one, but it doesn't work:

$(function(){
            $("li").hover(
                 function () {                   
                    var l = $("li").index(this);
                    $('div').html(l);
                    $("li:gt(l)").css('color','red');                    
                 }, 
                 function () {
                    $('div').html("");
                    $('li').css('color','black');
                 }
            );
});

Answer 1

Use nextAll():

$(function(){
        $("li").hover(
             function () {                   
                var l = $("li").index(this);
                $('div').html(l);
                $(this).nextAll('li').andSelf().css('color','red');                    
             }, 
             function () {
                $('div').html("");
                $('li').css('color','black');
             }
        );
});

Answer 2

And I founded one more posibility with slice():

$(function(){
            $("li").hover(
             function () {                   
                var l = $("li").index(this);
                $('div').html(l);
                $('li').slice(l).css('color', 'red');                    
             }, 
             function () {
                $('div').html("");
                $('li').css('color','black');
             }
        );
        });