Изменить цвет определенного пункта меню при наведении

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",""); 
    }); 
}); 
});