Question

我有以下导航。鼠标悬停链接时，我希望其他两个链接的不透明度降低，并在mouseout时返回完全不透明度我已经用jQuery完成了这个并且已经找到了其他问题/答案，但我正在努力使用纯粹的vanilla 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);
  });
});

Fiddle

Answer 1

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

在悬停时淡化兄弟姐妹。 jQuery到vanilla JS

1 个答案: