This forum is now read-only. Please use our new forums! Go to forums

0 points
Submitted by jancijen
about 9 years

a:hover selector

Hello,

I would like to know if it is possible to set that when I go with mouse over link I have already visited, it will change color to a:hover color?

HTML:

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title></title>
    </head>
    <body>
        <div>
            <a href="http://www.codecademy.com">Codecademy</a>
            <a href="http://www.google.com">Google</a>
            <a href="https://www.wikipedia.org">Wikipedia</a>
        </div>
    </body>
</html>

CSS:

a:link {
    text-decoration: none;
    color: #008B45;
}

a:hover {
    color: #00FF00;
}

a:visited {
    color: #EE9A00;
}

Answer 54f26472e39efee18a003465

4 votes

Permalink

If we want a hover effect on visited links, it is important that the :hover pseudo-class follows the :visited pseudo-class in the source order:

a:link {
    text-decoration: none;
    color: #008B45;
}
a:visited {
    color: #EE9A00;
}
a:hover {
    color: #00FF00;
}

Order matters. I have a little meme that helps me to keep them in the correct order:

LiVe HAppy

That is,

a:link
a:visited
a:hover
a:focus
a:active

The :focus pseudo-class is triggered with the TAB key. Open a web page and follow the highlighted box around the screen while you press the Tab key over and over. The link that is highlighted (faint border) is the link in focus to which the pseudo-class style rule will be applied.

points
Submitted by Roy
about 9 years

5 comments

jancijen about 9 years

Thank u very much :)

Jim McCall about 9 years

I thought his question was whether you could have the hover effect be moderated by whether the link has been visited or not, as in perhaps the hover effect doesn’t deploy once a link has been visited. I didn’t find this to occur with the code that was suggested.

Roy about 9 years

If we don’t want the hover effect on visited links, then reverse their order (hover ahead of visited.

red7cool almost 9 years

nice meme although sometimes hard to remember

Alexis La Porte almost 9 years

I had the same problem, thanks for the super helpful post Roy!

Answer 5553e6729376766a740003f3

1 vote

Permalink

Thanks for the “order counts” Roy, I followed the instructions in 15/23 which has link, hover and then visited and wondered why it didn’t work properly yet codecademy said I had it correct when I submitted it.

points
Submitted by Stephen Day
almost 9 years

1 comments

Roy almost 9 years

A small oversight by the original author, I suspect. Glad you get that order counts. This applies throughout the cascade so you will have this in the background in many instances.