Rollover Cells

ptpspptps0 posted this at 12:44 — 17th April 2006.

Joined: Apr 2006

I'm trying to understand CSS, but it's really confusing. Tell me this:

How is it that I can make an entire cell's background color change on mouse rollover, and how can I make a cell respond to an 'href', and not just the objects inside of it?

Thanks.

-Max

ptpspptps0 posted this at 15:15 — 17th April 2006.

He has: 52 posts

Joined: Apr 2006

Okay, I've got the cells to change via Javascript (even though I really don't want to use javascript). But I have this horrible jump on mouseover and mouseout. Which properties do I have to set in order to avoid this ugly sort of thing?

The cells are in a table, within a table. That's why I'm hesitant to wing it.

ptpspptps0 posted this at 15:18 — 17th April 2006.

He has: 52 posts

Joined: Apr 2006

Oh, and they change size too, which really sucks.

dk01 posted this at 15:21 — 17th April 2006.

He has: 516 posts

Joined: Mar 2002

Can you show us your code please? Its impossible for us to see what might be wrong without it.

ptpspptps0 posted this at 15:23 — 17th April 2006.

He has: 52 posts

Joined: Apr 2006

Sure:

HTML/Javascript:

<!-- begin navibox-->
<div id="navi">
<table>
<tr>
<td class="norm" onmouseover="this.className='hover'" onmouseout="this.className='norm'">Home</td>
</tr>
<tr>
<td class="norm" onmouseover="this.className='hover'" onmouseout="this.className='norm'">Articles</td>
</tr>
<tr>
<td class="norm" onmouseover="this.className='hover'" onmouseout="this.className='norm'">Projects</td>
</tr>
<tr>
<td class="norm" onmouseover="this.className='hover'" onmouseout="this.className='norm'">Downloads</td>
</tr>
<tr>
<td class="norm" onmouseover="this.className='hover'" onmouseout="this.className='norm'">Chat</td>
</tr>
<tr>
<td class="norm" onmouseover="this.className='hover'" onmouseout="this.className='norm'">About</td>
</tr>
</table>
</div>
<!--end navibox-->

CSS:

td.norm {
  border: 1px solid black;
  color: black;
  background: white;
  padding: 5px;
}
td.hover {
  border: 5px solid white;
  color: white;
  background: black;
  padding: 5px;
} 