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