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

JQuery .mouseover and .mouseout change font color

本文关键字：字体 颜色 改变 mouseout mouseover JQuery      更新时间：2023-09-26

我是JQuery的新手，我试图用它做一些基本的技巧。所以基本上，我有一个简单的导航无序列表，我想用JQuery改变字体颜色当前鼠标悬停列表项目，但我有问题，因为我的JQuery脚本正在改变所有列表项目的字体颜色，我想改变字体颜色只有当前鼠标悬停列表项目，而不是全部。我试图得到当前鼠标悬停列表项，但我不知道如何实现它，使我的JQuery只改变列表项。以下是图片:

我目前拥有的:https://i.stack.imgur.com/AhUrs.jpg
我想要的:https://i.stack.imgur.com/1rTUV.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>

而不是:

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

为什么是JQuery ?

在css中使用a:hover，它非常干净。

: 

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

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

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

$(document).ready(function () {
    $('.nav1 ul li a').hover(function () {
        $(this).css("color", "white");
    }, function () {
        $(this).css("color", "#6291d8");
    });
});
<<p> jsFiddle例子/strong>

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

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

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

例子小提琴

相关文章：