Text Change During Cell Hover

[johnnyg24]

I am looking for a way to change the text color of a link inside a cell and the entire background color of that cell using CSS hover. I can achieve this but the mouse has to hover directly over the link. I would like the color to change, for both the link and the background color, as soon as the mouse enters the cell. Here is the CSS I am using right now. Any suggestions would be helpful. Thanks!

.headerNav {	font-family: Garamond;	font-size: 24px;	color: #CCCCCC;	padding-left: 10px;}.headerNav a:link {	font-family: Garamond;	font-size: 24px;	color: #CCCCCC;	padding-left: 10px;}.headerNav a:active {	font-family: Garamond;	font-size: 24px;	color: #CCCCCC;	padding-left: 10px;}.headerNav a:visited {	font-family: Garamond;	font-size: 24px;	color: #CCCCCC;	padding-left: 10px;}td.headerNav:hover {	font-family: Garamond;	font-size: 24px;	color: #333333;	background-color: #CEF3FF;}

[jeffman]

As long as you use a strict doctype (to accommodate IE7) you can access the :hover pseudoclass of ANY page element. It doesn't have to be a link. You mentioned cells. This is a table? So try something like this:

.headerNav td:hover {	background-color: #faa;}/* and perhaps this */.headerNav td:hover a {	color: #0f0;}

[johnnyg24]

Thanks. I used your idea but changed it a little. This works:

td.headerNav:hover {		background-color: #CEF3FF;	}td.headerNav:hover a{	color:#333333;	}

[roundcorners]

try a {display:block;}