Hover effects on links in CSS
This Tutorial shows how to create hover effects on your links using CSS properties.
This tutorial covers how to make hover effects on your links using the CSS pseudo-classes.
The Pseudo-classes
- link
- visited
- hover
- active
When using these classes, keep in mind that for them to work, you need to place them in the oder they are listet.
Example
The following example will apply a basic hover effect to all of your links, and links that are hovered wil be red.
a:link { color: blue; }
a:visited { color: purple; }
a:active { color: yellow; }
a:hover { color: red; }Note. You can also apply other styles, like text-decoration, check the CSS Reference for more properties to use. As for colors, its recommended to read the color reference.