How do I create a link that changes color when the cursor moves over it?

One attractive link effect changes the color or otherwise alters the appearance of a link when the cursor is moved across it. This effect can be applied to great advantage on navigation menus created with CSS, but it can also be used on links within regular paragraph text.

Solution

To create this effect, we need to style the hover and active dynamic pseudo-classes of the anchor element differently from its other pseudo-classes.
Let's look at an example. Heres a typical style rule that applies the same declarations to all of an anchor elements pseudo-classes.

a:link, a:visited, a:hover, a:active {
text-decoration: underline;
color: #6A5ACD;
background-color: transparent;
}

When this style sheet is applied, our links will display in the blue color #6A5ACD with an underline.

To style our :hover and :active pseudo-classes differently, we need to remove them from the declaration with the other pseudo-classes and give them their own separate declaration. In the CSS below, I decided to apply an overline in addition
to the underline. I've also set a background color and made the links text a darker color;

a:link, a:visited {
text-decoration: underline;
color: #6A5ACD;
background-color: transparent;
}
a:hover, a:active {
text-decoration: underline overline;
color: #191970;
background-color: #C9C3ED;
}

As you've probably realized, you can style the anchor's other pseudo-classes separately, too. In particular, you might like to apply a different style to links that users have visited. To do so, you'd simply style the : visited pseudo-class separately.

When styling pseudo-classes, take care that you don't change either the size or weight (or boldness) of the text. If you do, you'll find that your page appears to jiggle, as the surrounding content has to move to make way for the larger text to
display when your cursor hovers over the link.