javascript - 鼠标悬停时的javascript添加和删除类

Question

Stack Overflow 上的第一个问题，关于 Vanilla Javascript。

我在无序列表中有四个链接。<li>我已经使用 forEach在每个上设置了一个鼠标悬停事件。当我将鼠标悬停在元素上时，我向元素添加了一个 css 伪类::after，它在悬停的元素下方显示一个小的 css 矩形。当我将鼠标直接向下移出元素并移出 时<ul>，Css 伪类::after被删除，矩形消失，这正是我想要的。除非我将鼠标从一个链接元素直接向左或向右移动到另一个元素，否则前一个链接元素的css伪类::after仍然保留，因此正方形保留。

下面是一些示例代码。任何见解将不胜感激。

navigationMouseOver();

function navScroll() {
  window.addEventListener("scroll", function() {
    if (document.documentElement.scrollTop > 100) {
      document.querySelector(".contact-info2").classList.add("visible");
    } else {
      document.querySelector(".contact-info2").classList.remove("visible");
    }
  })

}

function navigationMouseOver() {
  let navLi = document.querySelectorAll(".link");

  navLi.forEach(function(element) {

    element.addEventListener("mouseover", function(e) {
      let link = e.currentTarget;
      let linkText = e.currentTarget.textContent;
      console.log(linkText);
      const subMenu = document.querySelector(".sub-menu");
      const arrow = document.querySelector(".arrow");

      let elementPos = link.getBoundingClientRect();

      let elementTop = elementPos.top - 50;
      let elementWidth = elementPos.width;
      let elementBottom = elementPos.bottom - 10;
      let elementCenter = (elementPos.left + elementPos.right) / 2;

      let trueCenter = elementCenter - elementWidth;

      let arrowW = arrow.clientWidth;
      let arrowCenter = elementCenter - arrowW;
      element.classList.add("after");
      subMenu.classList.add("show");

      arrow.style.bottom = `${elementBottom} px`
      arrow.style.left = `${arrowCenter}px`
      subMenu.style.top = `${elementBottom}px`;
      subMenu.style.left = `${trueCenter}px`;

      subMenu.innerHTML = "Hallo";
      navMouseOver(element)
    })
  })
}

function navMouseOver(element) {
  let subMenu = document.querySelector(".sub-menu")
  let banner = document.querySelector(".banner");

  banner.addEventListener("mouseover", function(e) {

    if (!e.target.classList.contains("link")) {
      subMenu.classList.remove("show");
      element.classList.remove("after");
    }
  })
}

.banner-nav li.after::after {
  content: "";
  display: block;
  position: absolute;
  background: white;
  height: 30px;
  width: 30px;
  top: - 20px;
  left: 40%;
}

<section class="banner">
  <div class="banner-logo">
    <h1 class="logo-text"> Logo</h1>
  </div>
  <div class="banner-nav ">
    <ul class="nav-ul ">
      <a href="#"></a>
      <li class="link"> Gallery </li>
      </a>
      <a href="#">
        <li class="link"> Products</li>
      </a>
      <a href="#">
        <li class="link"> About </li>
      </a>
      <a href="#">
        <li class="link"> Contact </li>
      </a>

    </ul>

  </div>
  <div class="arrow"></div>
  <div class="sub-menu"></div>

</section>

标签： javascripthtmlcss

Answer 1

为此，您不需要 JavaScript。您可以将:hover伪类与::after这样的组合：

.banner-nav li:hover::after {}

.banner-nav li:hover::after {
  content: "";
  display: block;
  position: absolute;
  background: white;
  height: 30px;
  width: 30px;
  top: - 20px;
  left: 40%;
  border: 1px solid;
}

<section class="banner">
  <div class="banner-logo">
    <h1 class="logo-text"> Logo</h1>
  </div>
  <div class="banner-nav ">
    <ul class="nav-ul ">
      <a href="#"></a>
      <li class="link"> Gallery </li>
      </a>
      <a href="#">
        <li class="link"> Products</li>
      </a>
      <a href="#">
        <li class="link"> About </li>
      </a>
      <a href="#">
        <li class="link"> Contact </li>
      </a>

    </ul>

  </div>
  <div class="arrow"></div>
  <div class="sub-menu"></div>

</section>