Cascading Style Sheets (CSS) provides pseudo-classes that enable you to change the style HTML elements upon user interaction (such as hovering over or clicking an element). These are often used with the CSS text-decoration and color properties to change the text color and/or remove/add an underline under the text.
In this example, whenever the user hovers over any link within the <div> element with a class of cool-effects the underline will be removed, the color will change, and the font will become bold. You could add any relevant CSS property to the hover effect, however, be mindful of usability — hover over effects can be quite annoying if abused!
Careful attention needs to be paid to the order in which you place your pseudo-classes. If you use :link, :visited, :hover, and active pseudo-classes, you should place them in that order. Otherwise the cascading effect of one pseudo-class may “hide” any effect that you’re trying to achieve with a previous pseudo-class. For example, if you place :hover before the :link pseudo-class, the :link pseudo-class will override your :hover pseudo-class.
So again, as long as you place your pseudo-classes in the following order, you will be fine:
How Not To Do a Hover Over Effect
OK, let’s have a little fun and go way over the top with our CSS hover over effect. Let’s add properties that really screw up the text and generally make things really difficult for the user.
You could say this is how not to do a hover-over effect (mind you, it doesn’t look that bad — I’ve seen worse!)
So I found these really cool HTML templates that I thought you might be interested in.