This forum is now read-only. Please use our new forums! Go to forums
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
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.
Answer 5553e6729376766a740003f3
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.
1 comments
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.
Popular free courses
- Free Course
Learn SQL
In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.Beginner friendly,4 LessonsLanguage Fluency - Free Course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner friendly,11 LessonsLanguage Fluency - Free Course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner friendly,6 LessonsLanguage Fluency
5 comments
Thank u very much :)
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.
If we don’t want the hover effect on visited links, then reverse their order (hover ahead of visited.
nice meme although sometimes hard to remember
I had the same problem, thanks for the super helpful post Roy!