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!

`id` should be unique, stopped reading. [You _can_ read this](http://stackoverflow.com/a/11114634/601179) — gdoron, Feb 04 '13 at 19:48
For simplicity and efficiency, and cross browser selectors, use a library. jQuery is most common. — adeneo, Feb 04 '13 at 19:52

score 2 · Answer 1 · answered Feb 04 '13 at 19:50

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>

answered Feb 04 '13 at 19:50

robbrit

17,560
4
48
68

There are about 12 different color combinations which is why I was hoping to simplify this with one script. – Keith Feb 04 '13 at 19:52
@Keith using a script instead of css might make your life easier, but it won't make your user experience better. – Christophe Feb 04 '13 at 19:54
That's what I'm currently doing, just looking for another solution. Not too familiar with jQuery as adeneo mentioned above but I'll look into it. @Christophe, I'd like to see the difference in page load times and experience. It's a very small page on an intranet so I'm not really worried about that part. Just experimenting and trying alternate solutions to figure out what works best for not only me, but my users. Experimentation! – Keith Feb 04 '13 at 19:54
jQuery? That's even worse ;-) – Christophe Feb 04 '13 at 19:56
Just to answer your above comment: the smaller your page is, the more impact scripting solutions will have on performance. – Christophe Feb 04 '13 at 20:02

Ali Bassam · Accepted Answer · 2013-02-04T20:11:44.140

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...
});

Ali, thanks for the response. I'll try something like that out and see how it affects my page speed, etc. — Keith, Feb 04 '13 at 20:02

score 0 · Answer 3 · answered Feb 04 '13 at 20:20

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.

yes, unfortunately there are users in my organization still on IE6, so i do need to support those browsers. thanks for the solution on faking it though. — Keith, Feb 05 '13 at 01:51

Change multiple elements hover background color using JavaScript?

3 Answers3