[Javascript] How can I change this using CSS

[Roland Dong]

Thanks Mike and Ian for your help.

As a matter of fact, the html is javascript generated so I have to write
something like:

document.write('<div onmouseOver=this.className=this.className.replace("on",
"cat"); onmouseout=this.className.replace("cat", "on"); class="cat on">');

Can you tell me what is wrong with the above code, I tried single quote,
double quote and no quote on cat and on... but I keep getting errors.  What
is the right syntax for the above code?

> -----Original Message-----
> From: javascript-bounces at LaTech.edu [mailto:javascript-bounces at LaTech.edu]
> On Behalf Of Ian Skinner
> Sent: Wednesday, July 20, 2005 2:55 PM
> To: [JavaScript List]
> Subject: RE: [Javascript] How can I change this using CSS
> 
> 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.
> 
> 
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript