JavaScript knocks out CSS:hover

Hi im trying to make the Product Categories menu work on this page:

http://www.jaybrand.co.uk/p1.html

at the moment the page loads and CSS hover works to set the background position so that the graphic behind makes a roll over effect.

i put some javascript to set the background position to the roll over on click, but this knocks out the CSS hover:

onclick="setStyle('c1','backgroundPosition','0px 0px');

it means that c1:hover no longer works.. i tried putting !important in the CSS c1:hover background position and this fixed it in Firefox but not IE.

How can i write something in Javascript to also say:

onclick="setStyle('c1:hover','backgroundPosition','-276px 0px');

......... i know Javascript does not do hyphens and the way to get for example "background-position" in CSS is to ditch the hyphen and make "P"osition capitol. perhaps something can be done also to get to the CSS hover attribute?