影响html a：从同一个div悬停

Question

我对javascript一无所知，而且我在css中的知识还不足以弄明白，如果可以的话......

我有一个五个a的div：

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

我如何在javascript中写一些类似的东西：

在a上：悬停改变a的颜色从悬停的右侧

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

感谢任何链接或反馈

Answer 1

使用jquery非常简单：

$("a").hover(
    function(){
        $(this).nextAll().css("color", "#FFF");
    },
     function(){
         $("a").css("color", "#000");
     }
);​

Demo

Answer 2

一个简单的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属性不是绑定这些事件的最佳方式，但肯定是最容易上手的。