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

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

但我的问题是：

当我将鼠标悬停在一个标签上时，所有 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","");
    });
});
});

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

Change color of specific menu item on hover

jquery

requirejs