row colour onMouseover change in CSS

[madhavr]

how can i implement the following javascript rollover thingy into my CSS script??

i tried using this javascript but it doesnt override CSS so i need a CSS solution please.

 <table border="1">
    <tr onMouseOver="this.style.backgroundColor='#ff0000'" 
        onMouseOut="this.style.backgroundColor='#ffffff'">
      <td>Row 1</td>
    </tr>
    <tr onMouseOver="this.style.backgroundColor='#ff0000'" 
        onMouseOut="this.style.backgroundColor='#ffffff'">
      <td>Row 2</td>
    </tr>
    <tr onMouseOver="this.style.backgroundColor='#ff0000'" 
        onMouseOut="this.style.backgroundColor='#ffffff'">
      <td>Row 3</td>
    </tr>
  </table>

thanks !!

[peppeto]

OK This is the solution with javascript
<script language=JavaScript>

function CH(tr, mode) {
if (mode == 0) {
tr.className = 'name of class from css';
}
else {
tr.className = 'name of class2 from css';
}
}
</SCRIPT>

<tr class=name of class from css
onMouseOver='CH(this, 0)';
onMouseOut='CH(this, 1)';
OnClick=document.location.href='item.php?itemID=" . $row["ID"] . "';>
//if you want to go werther by clicking on row

Regards peppe

[madhavr]

hi

thanks for that reply

but isnt their a much simpler way of doing this just using CSS only??

i thought that the mouseover method might be implementable in the CSS script under the tr tags on TR class tags

thanks

[Mordecai]

CSS is static--it can't change on a whim like that. You must use javascript, and peppeto's method looks pretty clean.

[madhavr]

i have the td's in the table assigned to a class. i tried changing the tr to the same class as the tds and getting rid of class references made by tds but the changes did not work so i have stuck with tds and class references to those elements.

is it possible to still do a mouseover on the tr's if i have class references to td's?? will this work ok?

p.s. tr's = <TR> and td's = <TD>

thanks again

[hi-liter]

here's another method:

<style type="text/css">
.foo1 { font-family: arial;
font-size: 9pt;
background-color: green;
text-decoration: none;
color: #000000;
}
.foo2 { background-color: red;
text-decoration: none;
color: #000000;
}

.gee { font-family: arial;
font-size: 10pt; }
</style>

<table cellpadding="5" cellspacing="0" width="600">
<tr class="foo1" onmouseover="this.className='foo2'", onmouseout="this.className='foo1'" >
<td class="gee">more sample text goes here</td>
</tr>
</table>

works in IE6, NS6/7, Mozilla1.4b, but not w/ NS4.x or Opera 6.04