javascript - JQuery .mouseover 和 .mouseout 改变字体颜色

Question

我是 JQuery 的新手，我尝试用它来做一些基本的技巧。所以基本上，我有一个由无序列表组成的简单导航，我想用 JQuery 更改当前鼠标悬停列表项的字体颜色，但我有问题，因为我的 JQuery 脚本正在更改所有列表项的字体颜色，我想仅更改当前鼠标悬停列表项的字体颜色，而不是全部。我试图获取当前鼠标悬停的列表项，但我不知道如何实现它以便我的 JQuery 仅更改该列表项。以下是图片:

我目前拥有的:http://i.imgur.com/8vWcOci.jpg
我想要什么:http://i.imgur.com/4yD0bIc.jpg

这是我的 JQuery 代码:

$(document).ready(
        function(){
            $('.nav1 ul li').mouseover(
                function () {
                    var index = $( ".nav1 ul li" ).index(this);
                    $('.nav1 ul li a').css({"color":"white"});
                }
            );
            $('.nav1 ul li').mouseout(
                function () {
                    var index = $( ".nav1 ul li" ).index(this);
                    $('.nav1 ul li a').css({"color":"#6291d8"});
                }
            );
        }
);

这是我的 HTML:

<nav class="nav1">
                <ul>
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">SERVICES</a></li>
                    <li><a href="#">THERAPIES</a></li>
                    <li><a href="#">GALLERY</a></li>
                    <li><a href="#">BOOKING</a></li>
                    <li><a href="#">CONTACT</a></li>
                    <li><a href="#">ABOUT ME</a></li>
                </ul>
            </nav>

Answer 1

代替:

$('.nav1 ul li a').css({"color":"white"});

和:

$('.nav1 ul li a').css({"color":"#6291d8"});

使用:

$(this).css({"color":"white"});
$(this).css({"color":"#6291d8"});

如果你想在 achor 标签上应用 css:

$(this).find("a").css({"color":"white"});
$(this).find("a").css({"color":"#6291d8"});

通过使用 $('.nav1 ul li a') 您正在更改所有 anchor 标记 css 但是通过使用 $(this) 将更改当前点击的元素CSS。