setting background from js destroys background hover effect

this works fine: background and color getts changed


.mi:hover
{
background:#FFFFD9;/*sort of yellow*/
color: #B90400;/*red*/
}

<a id = 'test' class = "mi" href="#n">aaaaaaaaaaa </a>


when


document.getElementById('test').style.background = 'blue'


effect from hover , on background, is gone !?
on color part still works.
it isn't browser thing, works the same on IE and FF


this, on the other hand, works as expected, does not corrupt anything


document.getElementById('test').style.color = 'blue'


test link:
http://86.61.66.17:8084/AgroZoo/testHTML/testHTML.jsp


thanks for replays

Inline styles always override the stylesheet styles applied

add this to the css
.changed {
background-color: #0000ff;
}
and change the button code to something like this
<BUTTON class = "brb" ONCLICK="document.getElementById('test').className = document.getElementById('test').className + ' changed';"> destroy background hover 1</BUTTON>

should do the trick

nice tip, didn't know that classes in css could be combined like that.

thanks.