[Javascript] How can I change this using CSS
Mike Dougherty
mdougherty at pbp.com
Wed Jul 20 13:58:10 CDT 2005
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 at advance.net> 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 at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
>
>
> __________________________________________________________
> This message was scanned by ATX
> 2:42:36 PM ET - 7/20/2005
More information about the Javascript
mailing list