a:Stop working with :visited or :link

Question

I made 5 links and set them to change color using a:hover and a:visited. The problem is that when I use a:visited, the settings of a:hover stop working, the same happens when I use a:link. What exactly am I doing wrong?

<div id="topo">
        <div id="menu">
            <div class="links"> <a href="#">Home</a></div>
            <div class="links"> <a href="#">Empresa</a></div>
            <div class="links"> <a href="#">Projetos</a></div>
            <div class="links"> <a href="#">Junte-se a nós</a></div>
            <div class="links"> <a href="#">Contatos</a></div>
        </div>
    </div>  

.links{
display: inline;
padding: 5px;
}

a:visited {
color: #e6e6e6;
}

a:hover {
color: #cc9933;
}

Answer 1

Create a Class in css to manage these links:

.MenuLink {
      text-decoration: none;
      color: red;
}

a.MenuLink {
      text-decoration: none;
      color: red;
}
a:hover.MenuLink {
      text-decoration: underline;
      color: blue;
}

Applying:

<a href="#" class="MenuLink">Home</a> 
<a href="#" class="MenuLink">Empresa </a> 
<a href="#" class="MenuLink">Projetos </a> 
<a href="#" class="MenuLink">Junte-se a nós </a> 
<a href="#" class="MenuLink">Contatos</a> 

Answer 2

The a:hover only works for unlisted links, as we are pointing the styles to the element only a.

In other words - When declaring CSS as in the sample code snippet below, we are just applying customization to the link a and not for the rest. Example:

a:hover{color:red;}

Means - in making :hover about the a, changes the color to > red

So that the :hover works in the visited links, we would have to declare and point the CSS to the a:visited, which shall be as follows:

a:visited:hover {
    color: #000;
}

Which means - in making :hover about the a:visited(visited link), changes the color to > #000