悬停时淡化兄弟姐妹.jQuery to vanilla JS.

Question

我有以下导航。将鼠标悬停在链接上时，我希望其他两个链接的不透明度降低并在鼠标退出时恢复到完全不透明度。
我已经用jQuery完成了这个，并找到了其他混合的问题/答案，但是我正在努力使用纯普通的javascript解决方案，因为我根本不想在这个项目中使用jQuery。

.HTML

<nav id="nav-main">
  <h1><a>Home</a></h1>
  <h1><a>About</a></h1>
  <h1><a>Contact</a></h1>
</nav>

jQuery

$(function(){
  $('#nav-main a').hover(function(){
    var $this = $(this);
    $this.siblings().stop().fadeTo(300, 1);
    $this.parent().siblings().stop().fadeTo(300, 0.3);
  },function(){
    var $this = $(this);
    $this.siblings().stop().fadeTo(300, 1);
    $this.parent().siblings().stop().fadeTo(300, 1);
  });
});

小提琴

Answer 1

如果你不想重新发明轮子，你可以使用Google Closure的库，它可以编译成纯Javascript，同时仍然允许你使用库式函数。（与jQuery不同，Closure在编译的代码中包含所有库机制。