Special a:hover

ok I have a table that contains my navigation

table align='left' style='position: relative; top:-12px;' height='20'>
<tr>
<td class='nav'>
<a href='index.php'>Home</a>
</td>
<td class='nav'>
<a href='about.php'>About</a>
</td>
</tr>
</table>

Code (markup):

And the corresponding CSS

.nav {
border-right: 1px solid #000000;
font-weight: bold;
color:#FFFFFF;
font-size:18px;
padding-right: 12px;
padding-left: 10px;
padding-top: 7px;
}
.nav a:hover {
color:#9933FF;
}
.nav a:link {
color:#FFFFFF;
text-decoration: none;
}

Code (markup):

But when you hover over a link in that table the color of the text doesn't change

 

Try setting it in this over

:link
:visited
:hover
:active

LoVe
HAte

 

Thanks that worked

 

If you're only changing the hover state you could just set style for the link, then set style for the hover..

Example:

a { color: #fff; }

a:hover { color: #000; }

 

I'd also use an unordered list instead of a table.