...

View Full Version : Link color change on td cell hover



-John-
05-26-2010, 05:23 PM
Okay, to make a short story long - I am trying something that I have never tried before...and I'm lost on one thing and am left scratching my head. I had a look around the forum here and didn't quite find anything that matched what I am looking for, so I thought I would post and see if anyone had any thoughts.

The objective: When the mouse cursor is inside of the <td> cell, the background image and text link color should change. With my current code, I can only change the background image. With css I am able to change the link color, but only when the text is hovered over, not when the cursor is inside of the table's cell.

So, what I need is an idea of how to make the link color change when the cursor is inside of the cell, but not over the actual text link...does that make sense? lol.




Here's the doctype I am using - It seems to me that no matter which I use it doesn't change much for this application - so it may be irrelevant:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Here is the actual <td> code:

<td align="center" class="main_nav"><a href="about.php" class="top_nav">About</a></td>

And here are the accompanying .css codes:


a.top_nav:active { font-family: arial, verdana; color: #202020; font-weight: bold; text-decoration: none; }
a.top_nav:visited { font-family: arial, verdana; color: #202020; font-weight: bold; text-decoration: none; }
a.top_nav:link { font-family: arial, verdana; color: #202020; font-weight: bold; text-decoration: none; }
a.top_nav:hover { font-family: arial, verdana; color: #FFFFFF; font-weight: bold; text-decoration: none; }


td.main_nav { background-image: url('images/top_nav_white_bg.png'); background-position: top left; background-repeat: repeat-x; padding: 0px 5px 0px 5px; }
td.main_nav:hover { background-image: url('images/top_nav_red_bg.png'); background-position: top left; background-repeat: repeat-x; color: #FFFFFF; padding: 0px 5px 0px 5px; }





If anyone has any thoughts, I would appreciate them - sometimes I miss the easy things :P

Thanks in advance!

abduraooft
05-26-2010, 05:49 PM
You could use a selector like

main_nav:hover a:link{

} to change the color of links, though IE6 do not support :hover pseudo on any elements other than anchor.

PS:
Here is the actual <td> code:

<td align="center" class="main_nav"><a href="about.php" class="top_nav">About</a></td>
Don't you know why using tables for layout is very bad (http://www.hotdesign.com/seybold/)? Since you are dealing with a list of links, the proper semantic (http://boagworld.com/technology/semantic-code-what-why-how) tag to be used in this case would be the unordered lists (http://www.htmldog.com/reference/htmltags/ul/). Google for CSS+horizontal+menu, and you'll get plenty of results (without tables!)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum