如何使用javascript/jquery的悬停效果实现这一点？

所以我对JS和jQuery有点陌生，但我非常了解html和css。我想知道这是否可行

我有一些信息区导航的HTML代码。我已经全部设置好了，它在鼠标上调用了一个函数。这个函数将链接的颜色变成白色。对于mouseout，它会再次变黑。现在我知道您可能可以使用css来实现这一点，但我需要对Js/jQuery进行实践。我写了一些代码，它可以工作，但是它把所有的颜色都涂成白色，然后混合在一起，测试代码，你会看到的。是否有办法只选择所选按钮，并仅为该按钮添加颜色。可能是用一个数组或者什么的？？我真的不需要知道是否有办法使用css，我只需要养成使用js/jQuery的习惯

代码：

函数colorLink（）{
$（“.infoNav nav ul li a”）.css（“颜色”、“白色”）；
}
函数colorLinkOut（）{
$（“.infoNav nav ul li a”）.css（“颜色”、“黑色”）；
}

*{
边际：0px；
填充：0px；
}
.收割台包装{
位置：固定；
}
.固定{
位置：固定；
排名：0；
左：0；
宽度：100%；
背景色：透明；
}
身体{
背景：#CCC；
宽度：70%；
左缘：20%；
边际上限：0px；
高度：900px；
}
.main标题{
填充：0；
背景:#666；
高度：36px；
宽度：100%；
边界半径：5px；
位置：相对位置；
顶部：150px；
左：-70px；
盒影：10px 10px 10px#767373；
}
.main头导航ul li{
显示：内联块；
列表样式：无；
利润率：10px 0px 0px-30px；
左边距：15px；
位置：相对位置；
顶部：-128px；
左：10px；
}
.main标题导航ul li a{
文字装饰：无；
边界半径：3px；
颜色：白色；
填充：7px 20px 10px 20px；
右边距：-15px；
字体系列：“Eras ITC”；
}
.main标题导航ul li a：悬停{
背景：#f18529；
}
.主收割台导航ul.激活{
背景：#f18529；
}
.mainfo{
背景：白色；
高度：500px；
宽度：100%；
位置：相对位置；
顶部：200px；
左：-70px；
边界半径：5px；
盒影：10px 10px 10px#727272；
}
.mainfo.miInfo.p{
字体系列：Arial；
填充：10px 10px 10px 10px；
文本对齐：左对齐；
}
.mainHeader.LogoP区域{
位置：相对位置；
顶部：-100px；
}
.mainHeader.Logo区域图像{
位置：相对位置；
顶部：-130像素；
左：130像素；
}
.infoNav nav ul li{
列表样式：无；
边框：2件纯黑；
填充：30px；
边界半径：20px；
宽度：140px；
文本对齐：居中；
边缘顶部：30px；
位置：相对位置；
左：35%；
}
.信息导航ul li:悬停{
背景：#f18529；
颜色：白色；
}
.infoNav nav ul li a{
文字装饰：无；
颜色：黑色；
字体系列：百老汇；
字体大小：30px；
}
@仅介质屏幕和（最小宽度：150px）和（最大宽度：600px）{
身体{
宽度：100%；
}
.main标题{
填充：0；
背景:#666；
高度：70像素；
宽度：80%；
边界半径：5px；
位置：相对位置；
顶部：150px；
左：-70px；
列表样式类型：无；
}
.main头导航ul li{
文本对齐：居中；
身高：100%；
单词break：打破一切；
}
.main标题导航ul li a{
宽度：100%；
高度：20px；
填充：10px 5px；
显示：内联块；
利润率：10px；
}
.mainfo{
背景：白色；
高度：300px；
宽度：80%；
位置：相对位置；
顶部：200px；
左：-70px；
边界半径：5px；
盒影：10px 10px 10px#727272；
}
.mainInfo.miInfo{}
}

网站








请选择以下类别之一：）

使用悬停

函数colorLink（）{
$（this.find（“a”）.css（“颜色”、“红色”）；
}
函数colorLinkOut（）{
$（this.find（“a”）.css（“颜色”、“绿色”）；
}
$（'.infoNav nav li'）。悬停（colorLink，colorLinkOut）
*{margin:0px；
填充：0px；}
.收割台包装{
位置：固定；
}
.固定{
位置：固定；
排名：0；
左：0；
宽度：100%；
背景色：透明；
}
身体{
背景：#CCC；
宽度：70%；
左缘：20%；
边际上限：0px；
高度：900px；
}
.main标题{
填充：0；
背景:#666；
高度：36px；
宽度：100%；
边界半径：5px；
位置：相对位置；
顶部：150px；
左：-70px；
盒影：10px 10px 10px#767373；
}
.main头导航ul li{
显示：内联块；
列表样式：无；
利润率：10px 0px 0px-30px；
左边距：15px；
位置：相对位置；
顶部：-128px；
左：10px；
}
.main标题导航ul li a{
文字装饰：无；
边界半径：3px；
颜色：白色；
填充：7px 20px 10px 20px；
右边距：-15px；
字体系列：“Eras ITC”；
}
.main标题导航ul li a：悬停{
背景：#f18529；
}
.主收割台导航ul.激活{
背景：#f18529；
}
.mainfo{
背景：白色；
高度：500px；
宽度：100%；
位置：相对位置；
顶部：200px；
左：-70px；
边界半径：5px；
盒影：10px 10px 10px#727272；
}
.mainfo.miInfo.p{
字体系列：Arial；
填充：10px 10px 10px 10px；
文本对齐：左对齐；
}
.mainHeader.LogoP区域{
位置：相对位置；
顶部：-100px；
}
.mainHeader.Logo区域图像{
位置：相对位置；
顶部：-130像素；
左：130像素；
}
.infoNav nav ul li{
列表样式：无；
边框：2件纯黑；
填充：30px；
边界半径：20px；
宽度：140px；
文本对齐：居中；
边缘顶部：30px；
位置：相对位置；
左：35%；
}
.
$(function(){
    $(".infoNav li").mouseover(function(){
        $(this).find("a").css("color", "white");
    });

    $(".infoNav li").mouseout(function(){
        $(this).find("a").css("color", "black");
    });
});