Rollover effects within table cells

[Guest_imported]

Hi.

Is there a way that 'rollover links' can be placed into table cells so that when a user hovers over a cell, the colour of the text changes aswell as the entire table cell background colour? I would like to do this without using images.

The following accomplishes the efect but only changes the background behind the text and not the whole cell.

td.menu {color: #fc0; background: #306; width: 50%; margin- right: auto; margin-left: auto; margin-top: 0; border: 6px #fc0 ridge; }
.menu a { font-weight: bold; font-family: Arial, sans-serif;}
.menu a:link { color: #ffc; background: transparent;}
.menu a:visited { color: #ffc; background: transparent;}
.menu a:active { color: blue; background: lime;}
.menu a:hover { color: green; background: #fc0; text-decoration: none;}

Thanks all

 

[RISTMO]

As far as I'm aware, you would have to use JavaScript and give each cell that you want to change an ID. Then you'd have to add onMouseOver and onMouseOut functions to every link that will do this...

You want to know how?

Rick

 

[Guest_imported]

Sure, if it's not too much trouble.

Thanks

 

[deecee]

onMouseOver="this.style.background='white';"
onMouseOut="this.style.background='#CCCCCC';"

you can sub in whatever colors your heart so desires
btw you would put that in the cell tag like so

<td width=&quot;150&quot; height=&quot;25&quot; valign=&quot;middle&quot; class=&quot;menu&quot; onMouseOver=&quot;this.style.background='white';&quot;
onMouseOut=&quot;this.style.background='#CCCCCC';&quot;>

for the cell...as for the links you just use a:hover
whos that behind you?

 

[starway]

Yes it is possible.
Here's an example:

The styles:
[tt]
a.main {
display:block;
font-weight: bold; font-family: Arial, sans-serif;
}

a.main:hover {
color: green; background: #fc0; text-decoration: none;
}

a.main:visited {
color: #ffc;
}
[/tt]
You will need to wrap all cell content into <a> tag:
<td><a class=&quot;main&quot;>cell content</a></td>

This will help you to avoid using any scripting. The most important is to use &quot;display: block&quot; for <a> styles.
For more information read this: Thread216-338918
There's a discussion on this topic.