Change multiple elements hover background color using JavaScript?

Question

I've got this working right now using multiple ID's and consequentially, CSS properties for each one. I'd much rather have it be automatic. All links are displayed as blocks and floated next to each other to create a tiled look. For example:

<a href="#" id="spacetile1">Link 1</a>
<a href="#" id="spacetile2">Link 2</a>
<a href="#" id="spacetile3">Link 3</a>
<a href="#" id="spacetile4">Link 4</a>

#spacetile1 {
background-color:#FFF;}

#spacetile1:hover {
background-color:#000;} .... so on and so forth for all spacetiles

What I'm looking to do is change the hover color based on the attribute of the default background color using some if statements to save time and accuracy of looking up corresponding branding colors.

if .spacetile(background-color) === #FFF
then .spacetile:hover(background-color) = #000

I want to do that for a set amount of colors so all I have to do is code the background color I'd like that specific tile to be and the hover background will be taken care of with the script.

I've looked into getElementById but then I'd still be using multiple ID's instead of one class and everything I've read about getElementsByClassName says that it's not supported cross-browser.

Was wondering if anyone had any suggestions for simplicity and efficiency.

Thanks!

Answer 1

With a common class .

<a href="#" id="spacetile1" class="space">Link 1</a>
<a href="#" id="spacetile2" class="space">Link 2</a>
<a href="#" id="spacetile3" class="space">Link 3</a>
<a href="#" id="spacetile4" class="space">Link 4</a>

Using JQuery - JQuery Mouse Events

$(".space").mouseover(function(){

      if($(this).css('background-color')=='#FFF000')
      {
          $(this).css('background-color','#000FFF');
      }
      //else if else if and so on...
});

$(".space").mouseout(function(){

      if($(this).css('background-color')=='#FFF000')
      {
          $(this).css('background-color','#000FFF');
      }
      //else if else if and so on...
});

Answer 2

Why not use a CSS class:

<a href="#" id="spacetile1" class="spacetile">...</a>
<a href="#" id="spacetile2" class="spacetile">...</a>

<style>
.spacetile { background-color: #FFF; }
.spacetile:hover { background-color: #000; }
</style>

Answer 3

The question is built on a faulty assumption. getElementsByClassName is cross-browser for everything except IE<=8 . See http://caniuse.com/#feat=getelementsbyclassname (If you need to support IE<=8 , you can fake it as below):

function compatGetElementsByClassName(class, tag) {
  if (document.getElementsByClassName) {
    //Use native version
    return document.getElementsByClassName(class);
  } else {
    //Fake it
    i = 0;
    subset = (typeof tag !== 'undefined')?document.getElementsByTagName(tag):document.all;
    while (element = subset[i++]) {
      if (element.className == class) {
        //your code here
      }
    }
  }
}

Just enter the class name and (optionally) the tag name ("a" in your case). If you don't give a tag name, it will default to document.all which is very inefficient.