Javascript CSS悬停更改未覆盖项

我正试图用悬停来耍些把戏，但有一点我被卡住了。我想做的是，当我停留在“导航链接”上时，我想更改未被覆盖的链接

例如，当我打开“主页”时，我希望其他导航链接的字体重量变轻

这是我的html

<div class="nav-bar">
       <a href="#" class="nav-link">HOME</a>
       <a href="#" class="nav-link">ABOUT</a>
       <a href="#" class="nav-link">RESUME</a>
       <a href="#" class="nav-link">CONTACT</a>
</div>

---

我相信它可以用css或jquery来完成，但我被卡住了。谢谢你的帮助

在div上悬停，在锚点上悬停

.nav栏a{
字体大小：正常；
}
.导航栏：悬停a{
颜色：#CCC；
字体重量：较轻；
}
.导航栏a：悬停{
颜色：#0F0；
字体大小：粗体；
}

---

将鼠标悬停在div上，然后将鼠标悬停在锚点上

.nav栏a{
字体大小：正常；
}
.导航栏：悬停a{
颜色：#CCC；
字体重量：较轻；
}
.导航栏a：悬停{
颜色：#0F0；
字体大小：粗体；
}

---

还有一种方法可以使用伪选择器获得该值：not 所以它得到更少的css代码

.nav栏a{
字体大小：粗体；
}
.导航栏：悬停a:不（：悬停）{
字体大小：正常；
}

---

还有一种方法可以使用伪选择器获得该值：not 所以它得到更少的css代码

.nav栏a{
字体大小：粗体；
}
.导航栏：悬停a:不（：悬停）{
字体大小：正常；
}

默认/活动状态如何？默认/活动状态如何？非常感谢，它现在工作得非常好。谢谢。当添加鼠标悬停在孩子身上时，无需添加鼠标悬停在家长身上，当鼠标悬停在孩子身上时，您必须将鼠标悬停在家长身上，所以鼠标悬停在孩子身上就足够了，最后一个可以是

。导航栏a:hover

，非常感谢，它现在工作得非常好。谢谢。在子项上添加鼠标悬停时无需在父项上添加鼠标悬停，在子项上悬停时，您必须将鼠标悬停在父项上，因此鼠标悬停在子项上就足够了。导航栏a:鼠标悬停