CSS and javascript interaction

[RHO]

Hi,

I have a table with alternating bg-colors and in which I highlight the row
focused by the mouse. This is achieved by

<TR bgcolor='#A7BCCF' onmouseout="this.bgColor = '#A7BCCF'"
onmouseover="this.bgColor = '#86B1DC'">
<TD> Something ...
<TR bgcolor='#B8CADA' onmouseout="this.bgColor = '#A7BCCF'"
onmouseover="this.bgColor = '#86B1DC'">
<TD> Something else ...

THis works fine. If however I use CSS <TD class='myclass'> the
onmouseXXX-effect disappears. Any suggestions as how to resolve this ?

RHO

 

[Dom Leonard]

Hi,

I have a table with alternating bg-colors and in which I highlight the row
focused by the mouse. This is achieved by

<TR bgcolor='#A7BCCF' onmouseout="this.bgColor = '#A7BCCF'"
onmouseover="this.bgColor = '#86B1DC'">

Okay, you are coding mouseout/mouseover handlers to set bgColor values.
The last time I looked, these are *deprecated* in HTML 4.

<TD> Something ...
<TR bgcolor='#B8CADA' onmouseout="this.bgColor = '#A7BCCF'"
onmouseover="this.bgColor = '#86B1DC'">
<TD> Something else ...

THis works fine. If however I use CSS <TD class='myclass'> the
onmouseXXX-effect disappears. Any suggestions as how to resolve this ?

AFIK, the bgColor attributes are from HTML 3, whilst the class attribute
is from HTML 4. This brings into question the notion of specificity.
From your description (untested), the class attribute is taking
precendence over setting values for bgColor which has been replaced by
"background-color" in CSS.

For HTML 4, try something like:

<table>
<TR style="background-color: #B8CADA;"
onmouseout="this.style.backgroundColor = '#A7BCCF'"
onmouseover="this.style.backgroundColor = '#86B1DC'">
<TD> whatever
</TD>
</TR>
</table>

Normally style attributes of an element have higher specificity than
class name rules for the same element.

HTH,

Dom