Changing border colour on hover in different sections

Question

I have a nav bar that changes background colour between black and white depending on the section it is in. The a tags within also change colour as to avoid becoming invisible within the nav bar (e.g,; black-background section will have a white nav with black text, white-background section will turn the nav to a black background with white text).

I cannot seem to make this change extend to the :hover element.

Here is my code:

HTML:

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

CSS:

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

JS:

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');
  }
});

I assumed that I could have just added $(nav a:hover) but this did not seem to work.