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='#A7BCC F' onmouseout="thi s.bgColor = '#A7BCCF'"
onmouseover="th is.bgColor = '#86B1DC'">
<TD> Something ...
<TR bgcolor='#B8CAD A' onmouseout="thi s.bgColor = '#A7BCCF'"
onmouseover="th is.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]

Re: CSS and javascript interaction

RHO wrote:[color=blue]
> 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='#A7BCC F' onmouseout="thi s.bgColor = '#A7BCCF'"
> onmouseover="th is.bgColor = '#86B1DC'">[/color]

Okay, you are coding mouseout/mouseover handlers to set bgColor values.
The last time I looked, these are *deprecated* in HTML 4.
[color=blue]
> <TD> Something ...
> <TR bgcolor='#B8CAD A' onmouseout="thi s.bgColor = '#A7BCCF'"
> onmouseover="th is.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 ?[/color]

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="backgrou nd-color: #B8CADA;"
onmouseout="thi s.style.backgro undColor = '#A7BCCF'"
onmouseover="th is.style.backgr oundColor = '#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