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.