[Javascript] How can I change this using CSS

[Roland Dong]

Hello:

I have the following working code:
<div onmouseOver="style.backgroundColor='#FF00FF'; " onmouseOut=
"style.backgroundColor='#FFFFFF'" class="cat">


I want to move background color changing code to CSS. I tried something like
this:

<div onmouseover: this.className="on" onmouseout:this.className="off"
class="cat"> 

in style sheet add:

................
.off{ background: #D2D2EC; }
.on { background: #FFFFFF; }
.................

However, since there is already a "cat" class, it would override the "cat"
class. 

Any suggestion?  

Thanks



Here is part of the style:
<style >
table.menu       {position:absolute; visibility:hidden; background-color:
#FFF}
	.off{ background: #D2D2EC; }
	.on { background: #FFFFFF; }

	/* submenu formatting classes */
	td .col		     {border: 1px solid #00186B}
	.cat, .itm	     {border-bottom: 1px solid #ADADAD; padding: 2px
3px; background-color: #FFF}
	.cat		     {font-weight: bold}
	.cat img	     {margin-right: 5px}
	.cat .new	     {color: #FF0000}
	.itm a, .cat a	 {text-decoration: none}
	.itm a, .itm a:hover, .itm a:visited, .itm a:active	
	                 {color: #42425D}
	.cat a, .cat a:hover, .cat a:visited, .cat a:active	
	                 {color: #383843} 
	.csel		     {background-color: #D3D4ED}


<style >