CSS Hover Effect

In this tutorial, we are going to learn how to change the default style of a link so that it does not have the underline. Then we learn to write a CSS rule such that causes the underline to re-appear when the mouse is hovered over it.

Here what we will be creating. See live page here

Step 1:

We start off with a menu with default blue unstyled links.

See live page here

It is obvious that these are links and the underline decoration is not necessary and is only adding to the clutter user interface.

In this lesson we will learn how to use stylize these links to remove the underline and match with the site color. We will add an hover effect on the links so that the underline reappears.

First lets see how the menu is currently constructed.

For more details about this menu construction, see this tutorial.

Step 2:
Now we add a CSS rule for the <a> tag to give it a matching color and remove the underline from the link.

See live page here

Step 3:
Notice that as we hover over the text in the menu, the cursor becomes an hand icon. This effect is produced by the browser when it sees an anchor tag. But we want the hover effect (or state change) to be more noticeable. In particular, we want the underline on the link to re-appear on the hover state. To do this, we add what is called an "hover pseudo-class" to the "a" selector.

See live page here

And there you have it. We have stylized the link to remove its underlining and used the hover pseudo-class to make it reappear on hover.

Furtther Notes:

A fews things to note...

The hover effect only works if you hover over the actual text of the menu. In the next tutorial, you will learn how to make this hover effect work over the entire menu.

In Internet Explorer 6.0, the hover pseudo-class only works for the <a> tag. In Firefox, it works for other elements such as the <img> tag as well. However, it is still possible to create CSS image rollovers that works for both Internet Explorer and Firefox. See this tutorial.

If you have other <a> tag on this page, it will also be affected by our CSS rule. To isolate the effects of our CSS rules to within our menu only, see this tutorial.

For simplicity, we had excluded the doctype and the XHTML namespace in our example code. To see why it is best practice to include those, see this tutorial.

For the purpose of this example, we have use and embedded style sheet. If you are using these rules across multiple pages, it is best to move the CSS to an external style sheet. See this tutorial to learn how.