javascript - 影响 :hover from same div 上的 html a

Question

我对 javascript 没有任何了解，我对 css 的了解也不足以解决这个问题，如果可以的话..

我有一个包含五个 a 的 div:

<div>
    <a>1</a>
    <a>2</a>
    <a>3</a>
    <a>4</a>
    <a>5</a>
</div>

我怎样才能用 javascript 写一些像这样的东西:

在 a:hover 上改变 a 悬停右侧的 a 的颜色

例如，如果所有 a 都是黑色，如果我悬停 a2 ... 然后将 a3、a4 和 a5 变为白色，而 a1 和 a2 保持黑色

感谢任何链接或反馈

Answer 1

一个普通的 JavaScript 方法——不使用 jQuery。

更新:

Here is a demonstration.

这是一个遍历 <a> 的函数里面<div>寻找点击的那个。所有后续链接都是白色的。

function colorLinks(node) {
  // Gets the parent div
  var parentDiv = node.parentNode;
  // And get a list of all the links contained in the div
  var aLinks = parentDiv.getElementsByTagName("a");
  var nLinks = aLinks.length;
  var passed = false;

  // Loop over all the links
  for (var i=0; i<nLinks; i++) {
     // Set colors of the links if the loop has already passed the calling node
     if (passed) {
       aLinks[i].style.color = "white";
       // Note: instead of style.color, could set a CSS class afterHover
       // and setup the colors in CSS (probably better)
       // aLinks[i].className = "afterHover";
     }
     else {
       aLinks[i].style.color = "black";
       // Note: instead of style.color, could set a CSS class beforeHover
       // aLinks[i].className = "beforeHover";
     }

     // Set a flag when the hovered node was passed in our loop
     if (aLinks[i] == node) {
       passed = true;
     }
  }
}

function unColorLinks(node) {
  var aLinks = node.parentNode.getElementsByTagName("a");
  for (var i=0; i<aLinks.length; i++) {
     aLinks[i].style.color = "black";
  }
}
<div>
    <a onmouseover='colorLinks(this);' onmouseout='unColorLinks(this);'>1</a>
    <a onmouseover='colorLinks(this);' onmouseout='unColorLinks(this);''>2</a>
    <a onmouseover='colorLinks(this);' onmouseout='unColorLinks(this);'>3</a>
    <a onmouseover='colorLinks(this);' onmouseout='unColorLinks(this);'>4</a>
    <a onmouseover='colorLinks(this);' onmouseout='unColorLinks(this);'>5</a>
</div>

注意:内联onmouseover属性不是绑定(bind)这些事件的最佳方式，但肯定是最容易上手的方式。