a: hover stops working with: visited or: link

Question

a: hover stops working with: visited or: link

Navigation

#1 by (3 votes)
#2 by (2 votes)

4

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 a:hover settings stop working, so do 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;
}

html css

asked by anonymous 30.08.2015 / 03:47

2 answers

Error log in Java application Values within a given range

score 3 · 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;
}

Application:

<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>

score 2 · Answer 2

a:hover only works for unvisited links because we are only pointing styles to the a element.

In other words - By declaring CSS as in the example code example below, we are only applying customization to the a link and not to the rest. Example:

a:hover{color:red;}

It means - when doing :hover on a , change color to > red

For :hover to work in the visited links, we would have to declare and point the CSS to a:visited , which will be as follows:

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

What it means - When doing :hover on a:visited (visited link), change color to > #000