使悬停时的同级变小。 jQuery转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在编译后的代码中包括了所有库机制。）