如何選擇大於光標懸停的所有li？

Question

我想要改變大於光標懸停的所有li元素的css顏色。 我想舉個例子： 假設我有10個li - 無序列表中的元素（ul元素）。當我將鼠標懸停在第5個元素上時，我希望從5到10的所有元素都將被更改爲css顏色（第一個默認4個元素爲黑色）。 我的代碼是這一個，但它不工作：

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

你幾乎說對了，問題是，你必須使用的實際值在選擇器升變量，像：

$(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 2

使用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 3

而我與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'); 
      } 
     ); 
     });