CSS - Changing table cell background on mouseover

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
starsol
Forum Newbie
Posts: 24
Joined: Thu Jul 31, 2003 8:30 am
Location: Norfolk, England.
Contact:

CSS - Changing table cell background on mouseover

Post 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?
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post 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).
Post Reply