Question

我是JQuery的新手，我尝试用它做一些基本的技巧。所以基本上，我有无序列表的简单导航，我想用JQuery更改当前鼠标悬停列表项的字体颜色，但我有问题因为我的JQuery脚本正在改变所有列表项的字体颜色，我想要更改ONLY当前鼠标悬停列表项的字体颜色，而不是全部。我试图获取当前鼠标悬停列表项，但我不知道如何实现它，以便我的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')您正在更改所有锚标记css，但使用$(this)会更改当前点击的元素css。

Answer 2

这里不需要JS。您可以使用CSS :hover伪类：

.nav1 ul li a { 
    color: #6291d8;
}
.nav1 ul li a:hover {
    color: #FFF;
}

Example fiddle

Answer 3

为什么JQuery？

在a:hover中使用css它非常清晰。

像：

.nav1 ul li a { 
    color: #6291d8;
}
.nav1 ul li a:hover{
color:white;
}

对于所有其他链接，您可以再次使用a和a:hover a:active 将为您提供其他功能。

Answer 4

this是JavaScript中的一个特殊词，它指的是触发事件的元素。在jQuery中，您可以使用$(this)。所以你可以用以下代码替换你的代码：

$(document).ready(function () {
    $('.nav1 ul li a').hover(function () {
        $(this).css("color", "white");
    }, function () {
        $(this).css("color", "#6291d8");
    });
});

<强> jsFiddle example

请注意，我还将选择器更改为'.nav1 ul li a'。锚点有自己的默认样式，因此要覆盖它们应该定位它们，而不是父列表项目。我还使用mouseover方法替换了您的mouseout和hover，因为它保存了几个字符。最后，我使用了.css()的更基本的单一属性版本，它还节省了一些字符。

JQuery .mouseover和.mouseout更改字体颜色

4 个答案: