TD Rollover with CSS

[NeedScripts]

I am thinking of using something like

onmouseover="this.style.background='#800000'" onmouseout="this.style.background='#red'"

but would hate to put on every td, and was wondering if this would be possible using CSS?

Any help would be great :)

Thanks

[Nick_W]

Discussion from earlier today ;)
[webmasterworld.com...]

Nick

[NeedScripts]

td a {display: block; margin 0;}
td a:link {color: red;}
td a:hover {color: green;}

is for the link. I am wanting it without links.... but let me try out that code to see if it works without link :)

will post ASAP what I found.

[NeedScripts]

Nope it is not working :(

I am wanting to have different background color for the rollover in TD (not the link color).

[victor]

Though hover will theoreticaly work for any element, you'll be hard pushed to find a browser that honors it for anything other than links.

[NeedScripts]

Hi victor,

Currently we are using such [onmouseover="this.style.background='#800000'" onmouseout="this.style.background='#red'" ] code on few sites and it seems to be working on IE 4.0, Opera and even Netscape. :)

[synkronus]

td a { display: block; margin 0; }
td a:link { background-color: red; }
td a:hover { background-color: green; }

any help?

[NeedScripts]

I was thinking if there was any way of doing this if there were no links within td?

[edit_g]

How about this:

<table border="0" cellpadding="0" cellspacing="1" width="100%" bgcolor="#99ccff" height="350">
<tr>
<td height="300"> <table border="0" cellpadding="10" cellspacing="0" width="100%" bgcolor="white" height="350">
<tr onMouseOver="this.style.backgroundColor='#eff7ff'; status='hello';" onMouseOut="this.style.backgroundColor='#FFFFFF'; status='';" onClick="location.href='http://blah';" style="cursor:pointer;">
<td> <table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="203" valign="top">
<div align="center"><br>
hello</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

(sorry about the formating...)

[Receptional Andy]

I understand your problem, but in the end I decided that I was better off adding the code to every cell rather than risking compatibility problems messing around with little-used style code.

[gmiller]

Hovers should work on any element with Mozilla-based browsers. IE only supports them on links, and NN4.x doesn't support them at all. I don't remember how much support Opera has for hover.

[Receptional Andy]

You can do td mouseovers with IE5+ - i'm looking at some now. They also work on the latest Opera, Netscape (and Mozilla) browsers.

>I was thinking if there was any way of doing this if there were no links within td?

The style code above works for cells without links, i'm using it for this too.