What is the simplest way to implement mouseover background color change for HTML elements?

Question

I the following styles:

a.button {
    background-color: orange;
    margin: .2cm;
    padding: .2cm;
    color: black;
    font-family: sans-serif;
    text-decoration: none;
    font-weight: bold;
    border: solid #000000;
}

a.buttonMouseover {
    background-color: darkGoldenRod;
    margin: .2cm;
    padding: .2cm;
    color: black;
    font-family: sans-serif;
    text-decoration: none;
    font-weight: bold;
    border: solid #000000;
}

And the following javascript code (my first ever btw):

function backgroundChangeIn(element){
    if (element.className = "a.button"){element.className = "buttonMouseover";}
}
function backgroundChangeOut(element){
    if (element.className = "a.buttonMouseover"){element.className = "button";}
}

And, the following element that should change the background on mouseover:

<a class="button" href="" onmouseover="backgroundChangeIn(this)" onmouseout="backgroundChangeOut(this)">A Button</a>

It is working for me so far. But I was wondering if there was a better way.

(Sorry about all the code)

Answer 1

Depending on your target browsers, you could use the hover pseudo tag.

a.button {
    background-color: orange;
    margin: .2cm;
    padding: .2cm;
    color: black;
    font-family: sans-serif;
    text-decoration: none;
    font-weight: bold;
    border: solid #000000;
}

a.button:hover {
    background-color: darkGoldenRod;
}

Here's a bit of documentation on it at w3schools. It looks like it's well supported on all remotely modern browsers.

Note that both the normal and the hover styling rules are applied, hover taking precedence. So you just need to put what changes in the hover rule.

Answer 2

a.button, a.button:hover {
    margin: .2cm;
    padding: .2cm;
    color: black;
    font-family: sans-serif;
    text-decoration: none;
    font-weight: bold;
    border: solid #000000;
}

a.button {
    background-color: orange;
}

a.button:hover {
    background-color: darkGoldenRod;
}

And:

<a class="button" href="">A Button</a>

Answer 3

You can use a library like jQuery to make things simpler.

Answer 4

sblundy has the basics right. To add to that, all modern browsers will allow you to use the hover pseudo element on the <a> however IE6 won't recognise this on any other element.

In IE6 you would need some sort of JavaScript to add a class name when you hover. I like using jQuery, and the way I would do it like that is as follows:

$(function(){
  $('.hoverable').hover(function(){
    $(this).addClass('hover');
  },
  function(){
    $(this).removeClass('hover');
  })
})

which would give all elements with the class 'hoverable' a class of hover when they are hovered over.