我有一个问题，这个导航bar.All按钮移动时，鼠标悬停在它上面

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

nav ul li a {
  color: black;
  transition: color 0.3s;
}

nav ul li a:hover {
  color: red;
}

var buttons = document.querySelectorAll("nav ul li a");

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("mouseover", function() {
    this.style.color = "red";
  });

  buttons[i].addEventListener("mouseout", function() {
    this.style.color = "black";
  });
}