Problem using classes

CSS classes


.btnav { background-color: #C0C0C0; border: 1px #000000 solid;}
.btnOver { background-color: #64BCCE; border: 1px #000000 solid;}


HTML stuff

This works


<td class="btnav" onmouseover="style.backgroundColor='#64BCCE';"
onmouseout="style.backgroundColor='#C0C0C0'" width="20%" >
<div align="center"><a href="services.html">Services</a></div>
</td>



But this doesn't

<td class="btnav" onmouseover="class='btnOver'"
onmouseout="class='btnav'">
<div align="center"><a href="pricing.html" target="_blank">Pricing</a></div>
</td>



I want to control this with a stylesheet, not inline style tags, any ideas what I'm doing wrong? I'm new to this, so be gentle...hehe.

<td class="btnav" onmouseover="this.class='btnOver'" onmouseout="this.class='btnav'">
<div align="center">
<a href="pricing.html" target="_blank">Pricing</a>
</div>
</td>

Have you people ever heard of the :hover pseudoclass...?
.btnav {background-color: #C0C0C0; border: 1px #000000 solid;}
.btnav:hover {background-color: #64BCCE;}
No scripting needed!

Admittedly, this only works in standards compliant browsers; for IE, a fix for supporting the :hover pseudoclass on other elements besides a is needed, for example Peter Nederlof's whatever:hover (http://www.xs4all.nl/~peterned/csshover.html) behaviour script. Okay, a little bit of script is needed after all.

Have you people ever heard of the :hover pseudoclass...?

Yep, and I have used it in all of my (dropped) designs thus far for my undeveloped site. While JavaScript is overkill for rollovers in Firefox it is much simpler than HTML Behaviours, which I believe should be completely unsupported by the internet.

whats so bad about behaviors?

use the whatever:hover hack (see above) which works fine, and you're set to go!

Dan

the property is this.className btw.

Thanks for the help and direction.