Page 1 of 1

CSS - Changing table cell background on mouseover

Posted: Sun Jan 30, 2005 1:53 am
by starsol
I'm having a few headaches getting this to work how I want it -

I've currently got:

Code: Select all

table.nt td a{display: block;}
table.nt td a:link, table.nt td a:visited {}
table.nt td a:hover, table.nt td a:active {background-image: url('/li/left-gradient-hover.gif'); color: #FFFFFF; text-decoration: none;}
.lnl {margin-left: 10px; margin-top: 2px; margin-bottom: 2px;}
and something like:

Code: Select all

<table class="nt" width="140" border="0" cellpadding="0" cellspacing="0">
<tr><td class="nc"><a href="/link/" class="lnl">Link</a></td></tr></table>
However onmouseover the margin pixels remain the old background. I've tried using padding on the cell, using a <div>, but I still get the same outcome.

Does anyone have any ideas how I get get this so it changes the whole cell including any padding/margins?

Posted: Sun Jan 30, 2005 5:15 am
by patrikG
Javascript for that looks like this:

Code: Select all

function rollover(tObj,style)&#123;
	tObj.className=style;
&#125;
and a HTML <td> elements would need

Code: Select all

<td class="navigation_item" onMouseOver="rollover(this,'navigation_item_hover')" onMouseOut="rollover(this,'navigation_item')" onClick="self.location='http://www.myWebsite.com/'">Main</td>
in the CSS, you'd have two classes, navigation_item (containing the non-mouseOver background) and navigation_item_hover (containing the mouseOver background).