[RESOLVED] rollover for table rows

[perpetualshaun]

I am working on the admin for a client's site, and I'd like to add in the option where the table rows change color when you mouseover them. I've seen it on a few different sites, but each seemed to be using different methodologies. Does anyone know of one quick, concise way to do that?

I'd like to add the onMouseOver and onMouseOut commands in the <TR> tag, if possible. I am also using the CSS attribute class="bg1" or class="bg2" on my <TR> tags and then in my style sheet is have:

tr.bg1 td {
background-color: #e1e1e1;
border: 1px solid #ebebeb;
}
tr.bg2 td {
background-color: #fff;
border: 1px solid #ebebeb;
}

Anyone out there know some CSS / JavaScript combo I can add in to override the colors when one rolls the mouse over any cell in the row?


Thanks,

Shaun

[scragar]

tr.bg1 td {
background-color: #e1e1e1;
border: 1px solid #ebebeb;
}
tr.bg2 td {
background-color: #fff;
border: 1px solid #ebebeb;
}
tr.bg1 td:hover {
background-color: #000000;
border: 1px solid #ebebeb;
}
tr.bg2 td:hover {
background-color: #000000;
border: 1px solid #ebebeb;
}

[perpetualshaun]

Well, that does indeed work in Firefox for me, but not in IE. And it changes the background color of each individual cell, not the row as a whole on rollover. I'd like a way to select the checkbox in that row when one clicks anywhere on the given row as well.


Thanks,

Shaun

[scragar]

that requires javascript.

<tr onmouseover="this.bgcolor='#FF0000'" onmouseout="this.bgcolor='#000000';" onclick="chkboxN.checked = true;"><td><input type="checkbox" name="chkboxN" /></td></tr>

[perpetualshaun]

Thanks!! And for the rollover on the row as a whole, I used this:

tr.bg1:hover td, tr.bg2:hover td, tr.bg3:hover td, tr.bg4:hover td {
background-color: #e7dcc9;
}