Javascript 更改悬停在不同区域上的边框颜色

我有一个导航条，根据它所在的区域，在黑白之间改变背景颜色。内的

a

标签也会改变颜色，以避免在导航栏内不可见（例如，黑色背景部分将有带黑色文本的白色导航，白色背景部分将导航变为带白色文本的黑色背景）

我似乎无法将此更改扩展到：hover元素

这是我的密码：

HTML:

JS:

var top1=$（'#landing'）.offset（）.top；
var top2=$（'#aboutme'）.offset（）.top；
var top3=$（'#skills'）.offset（）.top；
var top4=$（“#投资组合”）.offset（）.top；
var top5=$（'#contact'）.offset（）.top；
$（文档）。滚动（函数（）{
var scrollPos=$（document.scrollTop（）；
如果（scrollPos>=top1&&scrollPos=top2&&scrollPos=top3&&scrollPos=top4&&scrollPos=top3）{
$（'#navbar'）.css（'background-color'，'#fff'）；
$（'nava'）.css（'color'，'#000'）；
$（'.logo'）.css（'color'，'#000'）；
}
});

---

我以为我可以添加

$（nav a:hover）

，但这似乎不起作用。

html在哪里？这里有一个类似的问题可能有助于定位

jquery

@GilangPratama中的

伪元素，对不起。正如您所知，这是我关于HTML、CSS和JS的第一个问题。
<div class="navbar" id="navbar">
    <div class="container flex">
        <h1 class="logo">LOGO</h1>
        <nav>
           <a href="#landing">HOME</a>
           <a href="#aboutme">ABOUT ME</a>
           <a href="#skills">SKILLS</a>
           <a href="#portfolio">PORTFOLIO</a>
           <a href="#contact">CONTACT</a>
        </nav>
    </div>
</div>

.navbar a:hover {
    border-bottom: 2px solid white;
}

var top1 = $('#landing').offset().top;
var top2 = $('#aboutme').offset().top;
var top3 = $('#skills').offset().top;
var top4 = $('#portfolio').offset().top;
var top5 = $('#contact').offset().top;

$(document).scroll(function() {
  var scrollPos = $(document).scrollTop();
  if (scrollPos >= top1 && scrollPos < top2) {
    $('#navbar').css('background-color', '#fff');
    $('nav a').css('color', '#000');
    $('.logo').css('color', '#000');
  } else if (scrollPos >= top2 && scrollPos <= top3) {
    $('#navbar').css('background-color', '#000');
    $('nav a').css('color', '#fff');
    $('.logo').css('color', '#fff');
  } else if (scrollPos >= top3 && scrollPos <= top4) {
    $('#navbar').css('background-color', '#fff');
    $('nav a').css('color', '#000');
    $('.logo').css('color', '#000');
  } else if (scrollPos >= top4 && scrollPos <= top5) {
    $('#navbar').css('background-color', '#000');
    $('nav a').css('color', '#fff');
    $('.logo').css('color', '#fff');
  } else if (scrollPos >= top3) {
    $('#navbar').css('background-color', '#fff');
    $('nav a').css('color', '#000');
    $('.logo').css('color', '#000');
  }
});