[Javascript] How can I change this using CSS

[Ian Skinner]

Something like this maybe?  May require some tinkering depending on the effect you are actually going for.  

This uses the CSS specification that the class can be a space delimitated list of two or more classes to apply to the given element.


div onmouseover: this.className=this.className.replace(" on", " over"); onmouseout: this.className=this.className.replace(" over", " on");
class="cat on">
--------------
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA
 
"C code. C code run. Run code run. Please!"
- Cynthia Dunning

...-----Original Message-----
...From: Roland Dong [mailto:rdong at advance.net]
...Sent: Wednesday, July 20, 2005 11:42 AM
...To: '[JavaScript List]'
...Subject: [Javascript] How can I change this using CSS
...
...
...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 at LaTech.edu
...https://lists.LaTech.edu/mailman/listinfo/javascript

Confidentiality Notice:  This message including any
attachments is for the sole use of the intended
recipient(s) and may contain confidential and privileged
information. Any unauthorized review, use, disclosure or
distribution is prohibited. If you are not the
intended recipient, please contact the sender and
delete any copies of this message.