Javascript 高亮显示元素时将颜色更改为链接

我试图使这个链接更亮，并想改变链接的颜色为黑色时，它的鼠标移过，并保持这样，直到悬停到另一个链接。我怎样才能做到这一点？（代码笔：）

这是HTML：

<nav>
  <ul class="menu">
    <li><a href="#0">Home</a></li>
    <li><a href="#0">About</a></li>
    <li><a href="#0">Help</a></li>    
    <li><a href="#0">Contact</a></li>
  </ul>
</nav>

<span class="highlight  appear"></span>

为什么不使用CSS？ 看看这支笔： HTML

为什么不使用CSS？ 看看这支笔： HTML

您可以通过在悬停链接时向其添加类，然后在悬停另一个链接时将其删除来实现此效果

将使用CSS属性

混合模式：差异：
.
我发现，如果不添加
将改变：不透明度，使用这种方法看起来不是很平滑。
您可以通过在悬停链接时向其添加类，然后在悬停另一个链接时将其删除来实现此效果

将使用CSS属性
混合模式：差异：
.
我发现，如果不添加
将改变：不透明度，使用这种方法看起来不是很平滑也是。
为什么不使用CSS？这正是CSS的用途。你把它弄得太复杂了。@AlvaroAlves@ADyson当一个链接悬停时，白色荧光灯来到链接位置，使它消失，因为它的颜色是白色的。我希望链接保持黑色，直到当链接悬停时荧光灯移动到另一个位置。我知道可以使用
：hover
更改颜色，但我真的因为希望这样设计而过于复杂了吗？我想用黑色和白色来展现双色的魅力。你试过：聚焦吗？还没有，但@likle解决方案奏效了。谢谢为什么不使用CSS？这正是CSS的用途。你把它弄得太复杂了。@AlvaroAlves@ADyson当一个链接悬停时，白色荧光灯来到链接位置，使它消失，因为它的颜色是白色的。我希望链接保持黑色，直到当链接悬停时荧光灯移动到另一个位置。我知道可以使用
：hover
更改颜色，但我真的因为希望这样设计而过于复杂了吗？我想用黑色和白色来展现双色的魅力。你试过：聚焦吗？还没有，但@likle解决方案奏效了。谢谢嘿，谢谢！我从第一种方法得到了更多信息，但我只是好奇第二种解决方案是如何工作的？mix-blend-mode属性允许您定义元素的颜色如何与元素后面的颜色混合。将其设置为“差异”将使其在白色背景上为黑色，在黑色背景上为白色。嘿，谢谢！我从第一种方法得到了更多信息，但我只是好奇第二种解决方案是如何工作的？mix-blend-mode属性允许您定义元素的颜色如何与元素后面的颜色混合。将其设置为“差异”将使其在白色背景上为黑色，在黑色背景上为白色。
// Select all links
const triggers = document.querySelectorAll('a');

// Select highlight element
const highlight = document.querySelector('.highlight');

// Highlight padding values
const paddingTop =  parseInt(window.getComputedStyle(highlight, null).getPropertyValue('padding-top'));
const paddingLeft = parseInt(window.getComputedStyle(highlight, null).getPropertyValue('padding-left'));

// Grab size values of the first link
const initialCoords = triggers[0].getBoundingClientRect();

// Create initial values for highlight making by using the size of the first link
const init = {
  width: initialCoords.width,
  height: initialCoords.height,
  top: initialCoords.top - paddingTop + window.scrollY,
  left: initialCoords.left - paddingLeft + window.scrollX,
}

// Set initial values to highlight element
highlight.style.width = `${init.width}px`;
highlight.style.height = `${init.height}px`;
highlight.style.transform = `translate(${init.left}px, ${init.top}px)`;

// Gets size values of each link and updates position, width and height of highlight element
function highlightLink() {
  const linkCoords = this.getBoundingClientRect();
  const coords = {
    width: linkCoords.width,
    height: linkCoords.height,
    top: linkCoords.top - paddingTop + window.scrollY,
    left: linkCoords.left - paddingLeft + window.scrollX
  }

  highlight.style.width = `${coords.width}px`;
  highlight.style.height = `${coords.height}px`;
  highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
}

// Runs function where each link is hovered
triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));

<nav>
  <ul class="menu">
    <li><a href="#0">Home</a></li>
    <li><a href="#0">About</a></li>
    <li><a href="#0">Help</a></li>    
    <li><a href="#0">Contact</a></li>
  </ul>
</nav>

a{
  color: blue;
}

a:hover{
  color: red;
}