in css I define the behavior of the text links like this:

a:link {
    color: gray;
}

a:active {
    color: #9999ff;
}

a:hover {
    color: #9999ff;
}

a:visited {
    color: gray;
}

Works fine. After I visited a link it should/ and does still have the same color. BUT, and that's what I don't get... after I visited a link it does not hover anymore. How can I make the text link behave the same way always: e.g. link:gray hover:blue???

Thx

in css I define the behavior of the text links like this:

a:link {
    color: gray;
}

a:active {
    color: #9999ff;
}

a:hover {
    color: #9999ff;
}

a:visited {
    color: gray;
}

Works fine. After I visited a link it should/ and does still have the same color. BUT, and that's what I don't get... after I visited a link it does not hover anymore. How can I make the text link behave the same way always: e.g. link:gray hover:blue???

Thx

• javascript
• html
• css
• hover

• 5 This is just a guess, but what if you put the hover rule after the visited rule. CSS is, to an extent, order specific. – Halcyon Commented Oct 1, 2013 at 15:21

4 Answers 4

@Frits van Campen is correct, the visited pseudo-class selector is overriding the hover selector, this fiddle has it fixed.

a:link {
    color: gray;
}
a:active {
    color: #9999ff;
}
a:visited {
    color: gray;
}
a:hover {
    color: #9999ff;
}

This is a CSS Specificity issue.

Rules of the same specificity will apply according to the order they were defined.

You should move the more important rules to the bottom of the list, so they take precedence.

Any pseudo-class you don't need, simply do not define it

NB: 1. follow this ordering of a to ensure styling apply to links
2. It's not necessary to specify {visited, focus, active} if you aren't using it.

a,
a:link {
  color: fontColor(color2);
  text-decoration-color: fontColor(color4) !important;
  text-underline-position: under; // to increase the gap between text and underlining in CSS
  text-decoration-thickness: 2px;
  font-weight: 600;
}

a:hover {
  text-decoration-color: fontColor(color2) !important;
}

// mind you am using SCSS (fontColor(color2))

###Try this I think it will work### hover MUST e after link and visited in the CSS definition in order to be effective active MUST e after hover in the CSS definition in order to be effective. Copied from w3school