Как определить селектор элемента HTML, используя Javascript?

Question

Я строю панель навигации, где, если вы наведите курсор мыши на элемент a на панели навигации, он добавит класс с именем nav-hover, который добавляет определенный стиль к a при наведении.

Дайте мне знать, если есть лучший способ реализовать это, но в каждом li я добавил свой уникальный селектор внутри navIn()````. Which method can I use that would automatically extract the selector. Using this``` не работал.

function navIn(obj) {
  document.querySelector(obj).classList.add('nav-hover');
}

function navOut(obj) {
  document.querySelector(obj).classList.remove('nav-hover');
}

<div class="navbar" id="navbar">
  <div class="container" id="nav-position">
    <ul class="nav">
      <li onmouseover="navIn('#nav-position > ul > li:nth-child(1)')" onmouseout="navOut('#nav-position > ul > li:nth-child(1)')"><a data-scroll href="#about">About</a></li>
      <li onmouseover="navIn('#nav-position > ul > li:nth-child(1)')" onmouseout="navOut('#nav-position > ul > li:nth-child(2)')"><a data-scroll href="#work">My Work</a></li>
      <li onmouseover="navIn('#nav-position > ul > li:nth-child(1)')" onmouseout="navOut('#nav-position > ul > li:nth-child(3)')"><a data-scroll href="#">Resume</a></li>
      <li onmouseover="navIn('#nav-position > ul > li:nth-child(1)')" onmouseout="navOut('#nav-position > ul > li:nth-child(4)')"><a data-scroll href="#contact">Contact</a></li>
    </ul>
  </div>
</div>

Answer 1

Вы можете использовать :hover псевдокласс для достижения того же эффекта при наведении:

РЕДАКТИРОВАТЬ: Вы можете добиться эффекта подчеркивания, просто CSS. Вы можете создать подчеркивание, используя pseudo-elements и применить к нему эффекты перехода, как показано ниже:

* {
  margin: 0;
  padding: 0;
}

a {
  color: black;
  text-decoration: none;
}

ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 70px;
  background: rgba(0, 0, 0, 0.25);
}

/* Set the position on your <a> tag so the pseudo-element will position relative to it. */
.nav-link {
  position: relative;
}

/* Create the underline element for each <a> tag */
.nav-link::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 2px;
  background: blue;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms ease;
}

/* Apply the :hover pseudo-class on the pseudo-elements */
.nav-link:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

<nav>
  <ul class="nav">
    <li><a class="nav-link" href="#">About</a></li>
    <li><a class="nav-link" href="#">My Work</a></li>
    <li><a class="nav-link" href="#">Resume</a></li>
    <li><a class="nav-link" href="#">Contact</a></li>
  </ul>
</nav>