Cell mouseover

1

Hello everyone!

I’m new at the forum. Question:
how can i do a mouseover effect on the cells like in macromedia.com?

I want the mouseover effect to change the background color of not only the text but of the whole cell. How could I do that?

Please help me, thanks,

Leo

2

I have been playing w/the cells and the CSS. Your suggestions work great. Now, I wanted to use CSS. But here’s the problem.

I have a CSS file and define properties for links, like this:

A:link
{
font-family: Verdana;
font-size: 8pt;
color: red;
font-weight: bold;
font-style:normal;
text-decoration:none;
}
A:active
{
font-family: Verdana;
font-size: 8pt;
color: red;
font-weight: bold;
font-style:normal;
text-decoration:none;
}
A:visited
{
font-family: Verdana;
font-size: 8pt;
color: red;
font-weight: bold;
font-style:normal;
text-decoration:none;
}
A:hover
{
color:#003399;
font-size:8pt;
font-family:tahoma;
font-style:normal;
text-decoration:none;
background-color:#ccffff;
}

And then, I define properties for the cell like you said like this:

.norm
{
background-color: #FF9933;
font-family: Tahoma;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
font-style: normal;
line-height: normal;
font-variant: normal;
text-decoration: none;
vertical-align: middle;
border: none;
cursor: hand;
}

.over
{
background-color: #FFD0A0;
color: #000080;
font-family: tahoma;
font-size: 8pt;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-decoration: none;
vertical-align: middle;
cursor: hand;
}

But, the links are not white or blue, instead they look purple or whatever color is defined in the link “<A>” property. But I want the links on the cell to look one color and the links on the body another color. How can I do this? Is it better to make a unbulleted list instead of the cells? If so, how can I do that?

Thanks!

Leo

3

if you want to use the style as specified in the table style and not the link style then dont make the text in your table a link. Keep it regular text. Since you have the cursor of the cell to be a hand, its already assumed that the entire cell is in fact a link, so use that cell (and not the text) as the link skipping the a (anchor) tag altogether and instead just using an onClick for the table cell.

<table width="100" border="0"><tr>
    <td class="norm"
onmouseover="this.className='over'"
onmouseout="this.className='norm'"
onClick="location.href='http://www.kirupa.com'">Link</td>
</tr></table>
4

There is a way using just CSS.


<style type="text/css">
.norm a:hover {
color:#567567;
}
</style>

Then, only <a> elements contained in an element of class “norm” will be selected :slight_smile:

5

MAN! you guys are awesome!

Thanks!

Leo