Question

i have no knowledge in javascript and the knowledge i have in css is not enough to figure it out, if it can be done ..

i have a div with five a’s in it:

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

How can i write something in javascript that would do something like:

on a:hover change the color of the a’s from the right of the a hovered

for example if all a’s are black and if i hover a2 … then turn a3, a4 and a5 to white, while a1 and a2 remain black

thanks for any links or feedback

Answer 1

A plain JavaScript method — doesn’t utilize jQuery.

Update:

Here is a demonstration.

Here’s a function that iterates over the <a> inside <div> looking for the one clicked. All subsequent links are colored white.

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>

Note: Inline onmouseover attributes aren’t the best way of binding these events, but are certainly the easiest to get started.