Question

I have a table, with one column

<table>
   <tr>
     <td width="30"  class="top-nav"><a href="#">Home</a></td>
     <td width="30" class="top-nav"><a href="#">About</a></td>
     <td width="30" class="top-nav"><a href="#">Contact</a></td>
   </tr>
</table>

I would like to CSS the column to have mouse hover effect, so I did following:

.top-nav a{
   display: block;
   padding: 3px;
   text-decoration: none;

}

.top-nav a:link, .top-nav a:visited{
   color: #000000;
   background-color: #1d5987;

}
.top-nav a:hover, .top-nav a:active{
   color: #ffffff;
   background-color: #666666;

}

But my CSS does not take any effect for a:link ,a:visited, a:hover, a:active background and font color change of the table cell, why?

Answer 1

It works if you remove the extra , here

.top-nav a:visited,

and

.top-nav a:active,

See example: http://jsfiddle.net/jasongennaro/ZSbdH/