CSS Rollovers

Javascript is a great scripting language used for creating websites. One of the more popular uses of JavaScript is the use of rollovers. There is a draw back with JavaScript rollovers, you have to use images to create the effect.

This means that you have to preload the images, which to people who have a slower connection this means the page takes longer to load. With CSS, you can use the :hover pseudo-class to get a similar effect. Here is an some example code that would create a rollover.

a {
 color: #FFFFFF;
 background-color: #94CB2E;
}

a:hover{
 color: #94CB2E;
 background-color:  #FFFFFF
}

It is just that simple, when a user rolls their mouse over top of the anchor elements, the background and text color will invert. For an example of this type of effect use your mouse to rollover the categories to the right of this article.

Topics: CSS, Design, Web Development