호버시 특정 메뉴 항목의 색상 변경

Question

이 코드를 만들었습니다. nav li 위에 마우스를 올려 놓으면 언제든지 볼 수 있듯이 nav li a의 색상을 변경하고 싶습니다.

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

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

하지만 내 문제는 이것이다 : 나는 하나 위로 마우스를 가져 가면

모든는 A 태그 색상을 변경합니다. 이 특정 항목을 어떻게 변경합니까? 내가 가리키는 태그 만 변경할 수 있습니다.

나는 기꺼이 도와 줄 사람을 위해 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",""); 
    }); 
}); 
});