在悬停时更改特定菜单项的颜色

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