Creating simple mouseovers using CSS

Have you ever tried to remove the underline in your links or change link color from the default blue?  Have you ever wondered how to make your links change color or size when your move your mouse over them?

Both of these tasks can be accomplished using a basic technique in cascading style sheets (CSS).

Consider the following example:

Link Example

Notice how the links have no underline. Also notice how the links change from blue to green as your mouse over them.

Now consider the screenshot from Dreamweaver below.  The top part of the window shows the CSS code in a stylesheet attached to the link example page below.

You can view the stylesheet directly here:

Stylesheet

If you look carefully, you can see the process.

1.  First, I created a new class called “navigation.”  It has some basic font attributes such as size and family.

2.  Next, I added characteristics that are specific to links of the class, “navigation.”  Link characteristics are identified by “a” (such as “.navigation a”).  For example, in this case, I removed the underline with “text-decoration: none;” and the changed the color of links with “color: #00F;”

3.  Lastly, I changed the characteristics of link color when moused over.  Mouseover (or “hover”) characteristics are identified by “a:hover” (such as “.navigation a:hover”).  In this case, I changed the color of the text to green when moused over with “color: #090;”

Using CSS-based mouseovers are much more efficient than image and JavaScript-based mouseovers once you get the hang of using them.

Share This