Hover effects, rollovers, super-fancy link styles — regardless of what you call them — are a great way to get extra bang for your buck when putting together a website.

Today we’ll be learning how to add a unique and creative feature to your website’s links using CSS. Using CSS Pseudo Classes, we can alter every aspect of a link when a visitor “hovers” over it, or puts their cursor over the link.

Change a Hovered  link’s background color with CSS:

a.link1:link { color:black; background-color:white; }
a.link1:visited { color:black; background-color:white; }
a.link1:hover { color:white; background-color:black; }
a.link1:active { color:black; background-color:white; }

In the above example, the link class is set to “link1.” Text with this class will appear as solid black text. Once the link is hovered, it will appear as white text with a black background like so: my super awesome class link1.

Using CSS to change the background of hovered links can have a striking effect. Try setting the background-color to “yellow” for a CSS highlighter effect, or using two different background colors like so: my super awesome class link2

You can create CSS hover effects using just about any combination of CSS styles you can imagine. Pure text effects can take advantage of “text-decoration” effects such as strikethrough and underline; or change the font color, font-family, or font-style.

More advanced CSS hover effects can also be used to simulate buttons without having to create image rollovers or using any javascript.

Other CSS Hover effects to try:

a.link3:link { text-decoration: line-through; }
a.link3:visited { text-decoration: line-through; }
a.link3:hover { text-decoration: none; }

And here is how each link class will look with the hover effect in place:

The “a.link3″ class will output the text with a strickthrough effect when a user hovers over it. The “a.link4″ class will change the font face entirely to Georgia (or any other web font you specify).

And finally, “a.link5″ is a more advanced CSS hover effect that combines borders and background-colors to simulate a simple button.

One thing to keep in mind when creating a CSS hover effect for your links is that unless your new link class specifically overwrites the styles of your global link class you may have some unexpected effects.

You will notice that each of the above sample links has an underline when you hover over the text even though an underline is not specified in the link class a:hover style. This is because the global link style of TutorialBlog.org has an underline applied to the psuedo class a:hover.

In order to remove global styles from your new link class simply over ride the original CSS. For instance adding “text-decoration:none;” to the CSS will remove the underline from any of the above hover effects like so:

Any of these CSS hover effects can be applied globally to all of your links sitewide by using the standard a:link, a:hover, etc. instead of creating a specific link class. These styles can attract a lot of attention to your links or add some extra style just where it’s needed. Be creative!

Now, that you know how to use CSS to create hover effects, next time we’ll talk about styling your “unordered list” elements (ul and li) to create drop-dead gorgeous navigation without a lick of javascript.