Revert to original CSS on mouseout

I'm trying to make an AjaxControlToolkit Accordion control change the header style on mouseover and mouseout. It works fine but when the user mouses over the currently selected header then leaves it the special CSS for selected headers is overwritten by the mouseout class that I've assigned. I'm just using onmouseover="this.className='AccHover'" and onmouseout="this.className='AccMouseOut'" in a <div> tag inside the accordions header sections.

Is there a way to remove the AccHover class on the mouseout event and have it revert ba开发者_开发百科ck to either the unselected CSS style or the Selected header style depending on the accordion panes state automatically?

I would use:

onmouseover="this.classList.add('AccHover')"

and

onmouseout="this.classList.remove('AccHover')"

EDIT: Ok I just remembered classList doesn't work in IE, I assume that's what you are testing in. In that case I would use something like:

onmouseover="this.className = this.className + ' AccHover';"

and

onmouseout="this.className = this.className.replace('AccHover', '');"

See example http://jsfiddle.net/RgRUN/2/

But I would call your own javascript function rather than write inline.