CSS a:hover doesn't work after JavaScript backgroundPosition

[builder]

Hi

I have a menu done in CSS. When you mouse over the menu i change the background position in order to display the 'hover' state. I'm using javascript to show/hide <div> when you click on a button to display proper content without reloading the page (Like a tab menu).

To display the menu in a 'hover' state when you have clicked, i use also javascript to move the background position so it stays on the hover state. But when i mouse over my other menu, they do not apply the CSS anymore.

Here is the JS i use on a 'onclick':

function menu()
{
document.getElementById('menu2').style.backgroundPosition = 'center 0';
document.getElementById('menu1').style.backgroundPosition = 'center -48px';
}

I guess it have something to do with the fact that i alter the CSS with the JS. But anyone know how to fix this without having to create my mouseover with JS and keep it in CSS?

[JimmyP]

Sorry.... i might of misread..but

Why cant you use a css hover pseudo class to move the position?

[builder]

i'm using CSS to move the position. But when you click on a button, i want the button to stay in the hover state. So i do it with the JS (the script i have provide) and it does what i intended. But if i mouseover an other menu that is not selected, the position of the background doesn't change anymore. Like if the CSS a:hover wasn't working anymore after clicking on a button....

[builder]

Ok, instead of using the attribute 'backgroundPosition' in the JS, i use 'className' to switch the CSS class name and it's working well.