CSS - a:visited:hover?

Question

How can I apply a font color only to hyperlinks which have already been visited and are being hover by the mouse?

Essentially, wha

Answer 1

There is a css declaration order for this to work properly as was mentioned earlier, although it didn't cover this particular option, it does make a difference. I've tested this on Chrome.

The order is

    a:link { color: red; }
    a:visited { color: blue; }
    a:visited:hover { color: yellow; }
    a:hover { color: green; }
    a:active { color: gray; }

It will work whether it comes before or after a:hover as long as both a:hover and a:visited:hover are after a:visited and before a:active. I just prefer to keep the two visited links together and the two hovers together.

Answer 2

there is a sequence between link css to take effect.. a:hover must come after a:link and a:visited and a:active must come after a:hover for more details refer below link..

http://www.w3schools.com/css/css_pseudo_classes.asp

Answer 3

FWIW, I was unable to style just color on a:visited:hover (Chrome/FF) without declaring a background for :link:hover (anything other than none or inherit seems to work, I used rgba() for alpha sake).

For this to work in Chrome/FF:

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

... (something like) this must be present:

a:link:hover {
    background-color: rgba(255, 255, 255, 0);
}

Answer 4

Yes that is possible.

Here’s an example:

<style type="text/css">
    a:link:hover {background-color:red}
    a:visited:hover {background-color:blue}
</style>

<a href="http://www.google.com/">foo</a><a href="http://invalid/">bar</a>