更改懸停時特定菜單項的顏色

Question

我創建了這一位代碼。正如你所看到的，當我將鼠標懸停在nav li上時，我想nav li a改變它的顏色。

<nav> 
    <ul> 
     <li> 
      <a href="#">test</a> 
      <a href="#">test2</a> 
     </li> 
    </ul> 
</nav> 

a { 
    padding-left: 100px; 
} 

require(['jquery', 'jquery/ui'], function($){ 
$(document).ready(function() { 
    $("nav li").hover(function() { 
     $("nav li a").css("color", "#02baff"); 
    }, function() { 
     $("nav li a").css("color", ""); 
    }); 
}); 

但我的問題是這樣的：

所有一個標籤改變顏色，當我將鼠標懸停在一個。我如何讓這個特定的項目改變它們並不是所有的只有我徘徊的標籤。

我爲你們願意幫助的人創造了一個jsfiddle。 https://jsfiddle.net/4oL2p351/

在此先感謝。

Answer 1

使用這樣的嘗試，

require(['jquery', 'jquery/ui'], function($){ 
$(document).ready(function(){ 

    $("nav li").hover(function(){ 
     $(this).find('a').css("color","#02baff"); 

      },function(){ 
       $(this).find('a').css("color",""); 
    }); 
}); 
});