使用 JavaScript 移除悬停效果

如何解决使用 JavaScript 移除悬停效果

我有以下问题。我基本上有滚动功能，起初导航栏是透明的，并且有悬停效果。我想更改导航栏的背景颜色，添加 EventListener 并在向下滚动后删除悬停效果。一切都很好，但我不知道如何去除悬停效果。我在互联网上寻找了一个多小时的解决方案，但没有找到有效的方法。

导航栏：

<!-- Navbar -->
<nav
  id="navbar"
  class="navbar navbar-expand-md navbar-dark fixed-top m-0 p-0 text-white"
>
  <a class="navbar-brand font-weight-bold text-uppercase" href="#"
    >Künstliche Intelligenz</a
  >
  <button
    class="navbar-toggler ml-auto nav-right"
    type="button"
    data-toggle="collapse"
    data-target="#collapsibleNavbar"
  >
    <span class="navbar-toggler-icon ml-auto"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul id="li1" class="navbar-nav ml-auto font-weight-bold text-uppercase">
      <li class="nav-item active">
        <a class="nav-link" href="#">Machine Learning</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Lernmethoden</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Anwendungsbereiche</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#kontakt">Kontakt</a>
      </li>
    </ul>
  </div>
</nav>

CSS：

@media only screen and (min-width: 960px) {
  .navbar .navbar-nav .nav-link:hover {
    color: #ffffff;
  }

  .navbar .navbar-nav .nav-link {
    position: relative;
  }

  .navbar .navbar-nav .nav-link::after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: blue;
    color: transparent;
    width: 0%;
    content: '';
    height: 3px;
    transition: all 0.5s;
  }

  .navbar .navbar-nav .nav-link:hover::after {
    width: 100%;
  }
}

JavaScript：

let ul = document.getElementById('navbar');

let l1;
let l2;

l1 = function (event) {
  if (event.target.nodeName == 'LI') {
    event.target.children[0].classList.remove('text-dark');
    event.target.classList.remove('bg-white');
  } else if (
    event.target.nodeName == 'A' &&
    event.target.classList.contains('navbar-brand')
  ) {
    event.target.classList.remove('bg-white','text-dark');
    event.target.classList.remove('text-dark');
  } else if (event.target.nodeName == 'A') {
    event.target.parentNode.classList.remove('bg-white');
    event.target.classList.remove('text-dark');
  }
};

l2 = function (event) {
  if (event.target.nodeName == 'LI') {
    event.target.children[0].classList.add('text-dark');
    event.target.classList.add('bg-white');
  } else if (
    event.target.nodeName == 'A' &&
    event.target.classList.contains('navbar-brand')
  ) {
    event.target.classList.add('bg-white','text-dark');
  } else if (event.target.nodeName == 'A') {
    event.target.parentNode.classList.add('bg-white');
    event.target.classList.add('text-dark');
  }
};

$(window).scroll(function () {
  if ($(window).scrollTop() >= 400) {
    $('.navbar').removeClass('bg-transparent');
    $('.navbar').addClass('bg-dark');

    ul.addEventListener('mouSEOut',l1,true);
    ul.addEventListener('mouSEOver',l2,true);
  } else {
    $('.navbar').addClass('bg-transparent');
    $('.navbar').removeClass('bg-dark');
    ul.removeEventListener('mouSEOut',true);
    ul.removeEventListener('mouSEOver',true);
  }
});