使悬停时的同级变小。 jQuery转Vanilla JS

Question

I have the following navigation. Upon mouseover of a link, I want the other two links' opacity to lower and return to full opacity upon mouseout.
I have accomplished this with jQuery and have found other questions/answer with a mix, but am struggling with a pure vanilla javascript solution as I do not want to use jQuery at all for this project.

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);
  });
});

Fiddle

Answer 1

If you don't want to reinvent the wheel, you could use Google Closure's library which compiles to pure Javascript whilst still allowing you to use library-style functions. (Unlike jQuery, Closure includes all the library machinery in the compiled code.)