How to reference this CSS in Javascript?

Question

Hi, i have the following CSS for a mouse hover event. Im not sure how to refer to the #tabs ul li a:hover from within the Javascript?

#tabs ul li a:hover
{
    color: #000;
    font-weight:bold;
    background-color: #0ff;
}

and i wish to swap the background color line for this Javascript code:

<script type="text/javascript">
     hex=255;

     function fadetext(){ 
         if(hex>0) {
             hex-=11;
             document.getElementById("#tabs ul li a:hover").style.color="rgb("+hex+","+hex+","+hex+")";
             setTimeout("fadetext()",50); 
         }
         else
             hex=255;
     }
</script>

Answer 1

This:

document.getElementById("#tabs ul li a:hover")

isn't valid syntax, you only need to specify the id there:

document.getElementById("tabs")

You can change the style of an element on hover something like this:

var elem = document.getElementById("id");

elem.onmouseover = function(){
   // your code
};

Let's suppose you have assigned the id myid to your link, you can do the stuff for that like this:

var elem = document.getElementById("myid");

elem.onmouseover = function(){
   elem.style.backgroundColor = 'color value';
   elem.style.color = 'color value';
};

Update:

Since in your code you are using loadit(this) in onclick event, you don't need to use document.getElementById because element is already referenced with this keyword, also you may want to use the onmouseover event instead of click event if you want to something to happen when element is hovered like:

<li><a href="tab-frame-workexperience.html" target="mainFrame" onmouseover="loadit(this)" >Work experience</a></li>

and then your function should look like this:

function loadit(elem)
{
   elem.style.color = 'color value';
}

and/or you can create the two functions for two events if you want.

Note also that you can use jQuery to do it easily and in unobstrusive fashion with hover method:

$(function(){
  $('#tabs ul li a').hover(function(){
     $(this).css('color', '#ff0000'); // this fires when mouse enters element
  }, function(){
     $(this).css('color', '#000'); // this fires when mouse leaves element
     }
  );
});

Answer 2

One solution is to edit your stylesheet instead of changing the style of every element, this can be done with a simple one-liner:

document.styleSheets[0].insertRule("#tabs ul li a:hover{rgb(255, 255, 255);}", 0);

Where the second argument specifies that the rule should be inserted first in the stylesheet.

For IE this is done with the addRule function instead:

document.styleSheets[0].addRule("#tabs ul li a:hover", "rgb(255, 255, 255)");

Update:

In your case, it would mean replacing this row:

document.getElementById("#tabs ul li a:hover").style.color="rgb("+hex+","+hex+","+hex+")";

with

var ss = document.styleSheets[0]; //gets the first external stylesheet in your document
if(ss.insertRule) //checks browser compatibility
  ss.insertRule("#tabs ul li a:hover{rgb("+ hex + ", " + hex + ", " + hex + ");}", 0);
else
  ss.addRule("#tabs ul li a:hover", "rgb("+ hex + ", " + hex + ", " + hex + ")");

Answer 3

Do you mean like this? This didn't work...

#tabs ul li a:hover
{
    color: #000;
    font-weight:bold;
    <script type="text/javascript">
            hex=255;
            var elem = document.getElementById("tabs");
            elem.onmousehover = function fadetext(){ 
            if(hex>0) {
                hex-=11;
                elem.style.color="rgb("+hex+","+hex+","+hex+")";
                setTimeout("fadetext()",50); 
            }
            else
                hex=255;
            }
        </script>
}