'html link hover not working after link visited?

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

javascripthtmlcsshover


Solution 1:[1]

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.

Solution 2:[2]

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

Solution 3:[3]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rodik
Solution 2 Chukwu3meka
Solution 3

Related Questions