JQuery .mouseover 和 .mouseout 改变字体颜色答案

【问题标题】：JQuery .mouseover and .mouseout change font colorJQuery .mouseover 和 .mouseout 改变字体颜色
【发布时间】：2014-07-25 12:48:25
【问题描述】：

我是 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>

【问题讨论】：

标签： javascript jquery html css fonts

【解决方案1】：

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

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

Example fiddle

【讨论】：

这是最好的，因为这只能通过 css 实现，为什么还要麻烦 js。

【解决方案2】：

代替：

$('.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。

【讨论】：

啊啊啊，我太笨了。非常感谢！我会将其标记为已回答。
请注意，this 将引用 li 元素，而不是其中的 a。如果在更高优先级的a 上设置了 CSS 类，这可能不起作用。

【解决方案3】：

为什么是JQuery？

在css 中使用a:hover 会更干净。

喜欢：

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

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

【讨论】：

看起来 OP 正在尝试学习 jQuery（“我是 JQuery 的新手，我尝试用它做一些基本的技巧。”）
@j08691 但是 OP 仍然应该为正确的任务使用正确的工具。使用 JQuery 来完成如此简单的任务对浏览器来说成本很高。无论如何，毕竟它的 OP 的选择 :)..
原则上我同意你的看法。通常 CSS 会是最好的路线。
我知道我可以为此使用 CSS，但正如我上面所写的，我正在尝试学习 JQuery，所以我想让它与 Jquery 一起使用。
没关系@MahirDuraković。学习一些东西总是很好的。如果您再次需要任何帮助，我们在这里:)。

【解决方案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'。锚点有自己的默认样式，因此要覆盖它，您应该以它们为目标，而不是父列表项。我还用hover 方法替换了您的mouseover 和mouseout，因为它节省了一些字符。最后，我使用了.css() 的更基本的单属性版本，它也节省了一些字符。

【讨论】：