Creating a Rollover Effect with CSS

I recently discovered there’s yet another way to create rollover images in Dreamweaver. This method actually doesn’t even require any knowledge of JavaScript, even minimally. You only need to know basic CSS. In fact, it doesn’t even require images.

How to create a rollover effect in CSS

If you remember how rollover images work, they are essentially two images that swap with each other depending on whether the cursor is hovering over them. We can create a similar effect in CSS through the use of the <a> tag’s pseudo-classes.

A link can have the following pseudo-classes:

  • a:hover – indicates the mouse pointer is over the link
  • a:visited – indicates the link has been visited
  • a:active – indicates the link is active (e.g, the user has clicked down on it)

By using traditional CSS properties “colors” and “text-decoration” in the link tag’s pseudo-classes (shown below), we can create the same visual effect of rollover images.

CSS Links Webucator Google

Note that order matters. If a:active precedes a:hover, the effects in a:hover will take precedence. So, in this example, you would not see the color change when the user clicks down on a link.

By using even more properties, such as padding, margin, and border, it is possible to create links that look like buttons, something you would normally need images for. The following example illustrates this.

Button Links

The screenshots below show how these CSS buttons look in different states: the default state, the hover state, and the active state.

Default State
a:hover - Cursor hovering over link
a:active - Mouse click on link

Which method do you like better: the traditional, JavaScript method (which Dreamweaver can do for you, without you ever having to code), or the CSS method?

About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.