PDA

View Full Version : change td bgcolor on rollover | CSS ?


tanel96
August 13th, 2006, 12:08 PM
I'm trying to achieve an effect, where the background color of the <td> changes when i roll over it.

Here's my table


<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60" align="center">no link </td>
<td width="40" align="center"> <a href="http://www.cnn.com" class="menu">link</a> </td>
</tr>
</table>


all the css rollovers and stuff work for the link, but how do i make the td change it's background color on rollover ?
zerokilled
August 13th, 2006, 07:30 PM
well, the answer can be wide as opening our arms or narrow as our finger next to the other. this will depend in your content and your (x)html code. you can use either css and/or javascript to achieve this efect. I will explain both, but with javascript i will just give you an overview. first question to argue is, which will be the content of each cells? only the link? if this is true, then we can achieve the effect just using CSS. otherwise, javascript will help.

--CSS--
this is how i would solve. first, every cell should not include inner space around the cell border and the content, so I will remove it with padding property so that every content is near the cell's border

td{
padding:0;
}

and at least i would remove any margin and set an inner space to every link within cells

td a{
margin:0;
padding:10px;
}

pay attention here, to set space around the link use the padding property as shown above. this is the basic structure, then you go on with the other rule as a:hover

td a:hover{
background:#CCC;
}

-- javascript --
javascript can be helpful when the cell has more content other than the link. so, the previous example is useless to achieve the effect. whit javascript you got to set an event caller to every cell to execute a function. so this event pass an argument telling the funcion which cell change the background color. but you got to use two event caller, one when the mouse rollover (onmouseover) and another one when the mouse rollout (onmouseout).

i don't know which one is more appropiate for you, i'm almost sure that the first one will. however, if you need the second choice, just ask for the code. me or maybe someone else will help you with the code.

-- a third choice --
maybe someone will mention this choice, although it may look good, the truth is that isn't good enought. here again with css. if you use a Gecko browser like mozilla, firefox, flock, netscape, seamonkey and maybe safari, you will be able to see the result, but if you use other browser, you don't. i don't know if this is a bug from Gecko browsers or if this is not compliant with the standard, but here i go, just set an :hover to a td element like follow:

td{
background:#666;
}

td:hover{
background:#CCC;
}

-- conclusion --
notice that they all have different behavior, although last two seems the same.
good luck
tanel96
August 14th, 2006, 09:57 AM
thanks for your contribution, BUT... when using the first version... only the background of the link changes color... not the cell itself
MikeDS
August 14th, 2006, 10:30 AM
for the td hover tag, try adding

width: 100%

Also, if this doesn't work, make sure the first tag on your html page is just <html>, that seems to work fin for me!!
tanel96
August 14th, 2006, 11:02 AM
nope... unfortunately width: 100%; doesnt work... i cant start the page with just <html> ... my page MUST validate !!!
Jeff Wheeler
August 14th, 2006, 11:25 AM
You could, validly, use the selector td:hover… of course, this doesn't work in IE (go MS!).

I think there are some files you can include which can modify IE's behavior, forcing it to support this.
tanel96
August 14th, 2006, 11:39 AM
i've been fiddling around with it, and i think in the case of IE being a pain in the butt... i should solve the situation using padding, at the moment i have the following CSS:



.passive {
padding-top:30px;
padding-bottom: 9px;
}
a.menu, a.menu:visited {
color: #C7C7C7;
text-decoration: none;
}
a.menu:hover, a.menu:visited:hover {
color: #FFFFFF;
text-decoration: none;
padding-bottom: 9px;
padding-top:30px;
background-color:#009999;
}


basically it works fine, BUT i have to use the "padding-right" and "padding-left" properties, but they are different for every link... is there a way to force the padding to 100% of the cell ?
takethetrain
August 14th, 2006, 11:59 AM
if you add display: block to the style for A tags, you can then define width and height (without actually changing the appearance of the text). This sort of thing is used for a lot of CSS drop down menus. Not sure how you would find the width of *each* table cell though.

The IE hover thing can actually be fixed.. check out Whatever:hover (http://www.xs4all.nl/~peterned/csshover.html).
Jeff Wheeler
August 14th, 2006, 12:00 PM
Yeah, that's what I was thinking about…
zerokilled
August 14th, 2006, 12:01 PM
it seem that you don't want to set the cell's dimension in random. what about using display:block for links within td tags? it will force the link to display as a block content, but remenber, this only work if the link is the only content in the cell. notice that you can set the width of the cell, but not the height. in this case, your only solution will be using td:hover and for browser that don't support the rule use javascript. that would be my solution no matter what other says.
tanel96
August 14th, 2006, 12:35 PM
Thanks a lot guys... :beer: [problem solved]

"takethetrain" provided the clue i was looking for ...

If someone is still wondering what i was trying to achieve then I uploaded this small example @ http://fritz.msn.ee/test.html

If you think there is a way to make this example even better, then please let us know :)
Jeff Wheeler
August 14th, 2006, 12:46 PM
You might try using a list, which is more semantic…

http://css.maxdesign.com.au/listamatic/horizontal31.htm

There are some other great ones listed on that site, also.
tanel96
August 14th, 2006, 03:29 PM
yeah, but actually my original tabel is a bit more complex... with cells that have images and stuff