TEST HOVER!
TEST HOVER!
TEST HOVER!

Mouseover the colored boxes to change the background-color. Nothing special. The trick is that the anchor tags change their pseudo-class style properties as well.

The following is an excerpt from the email I wrote when I came up with the original idea.

---

Yimay, I included PCurry on this cuz I thought he'd be interested in the proposal. Patrick, this refers to Yimay's color switching script on her lomo page. Previously I couldn't figure out how to change a pseudo-class with dhtml.

I think I figured out a way to change the :hover color on those links. Basically what we'll do is write two classes in the stylesheet. If the anchors don't have a class, you'll have to make one. In the example below, light and dark refer to the background colors, NOT the text color. So, in the html:

<a href="#" class="light" onmouseover="classChange("dark");">link</a>

and in the css:

/* When on light background, hover bg color stays light */
a.lightcolor {color:#000;}
a.lightcolor:hover {background-color:#ccc;}

/* When on dark background, hover bg color stays dark */
a.darkcolor {color:#fff;}
a.darkcolor:hover {background-color:#666;}

Now what we'll do, instead of changing the style directly, is change the classname of all the anchors on the page. Once they take the new class name, they inherit all the style properties of that class, including pseudo-classes. So, in the JavaScript:

function classChange(newClass){
  anchorArray = document.getElementsByTagName("a");
  for (i=0; i<anchorArray.length; i++){
    anchorArray.item(i).className = newClass;
  }
}

I haven't checked that syntax yet, but I'm pretty sure it's right. Cool, huh? Theoretically, you could have any number of classes, not just the two. I figured two would be easier to show the example with the minimum.

Let me know if you have any questions.