[Javascript] How can I change this using CSS

[mdougherty at pbp.com (Mike Dougherty)]

how about this?
html:
<div
   class='cat'
   onmouseover="this.className+=' on';"
   onmouseout="this.className=this.className.replace(/ on/g,'');"
   >etc</div>

css:
.cat{ background: #D2D2EC; }
.on { background: #FFFFFF; }

I would personally prefer to encapsulate the behaviors in a function:
html:
onmouseover="myfunction(this,'on')"
onmouseover="myfunction(this,'off')"

script:
myfunction(obj,dowhat){ a place for event code to grow in complexity without cluttering html }


Lately i've been warming to the idea of attaching the events using javascript rather than putting 
them in html - but that's another topic...

On Wed, 20 Jul 2005 14:42:25 -0400
  "Roland Dong" <rdong@xxxxxxxxxxx> wrote:
> 
> 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 >
> 
> _______________________________________________
> Javascript mailing list
> Javascript@xxxxxxxxxx
> https://lists.LaTech.edu/mailman/listinfo/javascript
> 
> 
> __________________________________________________________
> This message was scanned by ATX
> 2:42:36 PM ET - 7/20/2005