Cell Border and BG change

I have a simple request for some HTML help. I have a html page that has the navigation bar on the left hand side. All the links are basically hyperlink text in cells enclosed by a table. The table has no borders and a white background. Now what i need to do is when some hovers over a link I would like for the following things to happen.

1. Have the link change from Blue to Red
2. Have the background of the cell that the link is enclosed to change from White to Grey
3. Have the border of the cell to go from no-border to having a border.

I guess it would be easy to just create two seperate images for each link and use JS for hover over effect. I just don't want to create all those images for all the links. I figure this would be alot easier and faster.

Try:

<style type="text/css">
a:link, a:active, a:visited {color:blue; background-color:white;border:none}
a:hover {color:red; background-color:grey;border:1 green solid}
</style>
</head> :D

Hey Zoobie, does that make only the background of the text change, or the whole cell? Is there one for making the whole cell BG color change?

When the display property of the a element in question is set to block, it should span the whole table cell, and therefore in fact change the entire background of it. I've understood there are issues with the width property; read this article on ALA about it, there's also more interesting info on links there: CSS Design: Taming lists (http://www.alistapart.com/stories/taminglists/).

Well, the cell kinda shrink-wraps to the text so the text's background looks like the cells. Otherwise, you could do a background image swap mouseover with javascript but then we're back to square 1...:D