Welcome to Code Couch

How to create rollovers without using Javascript

Posted by at 2:11pm on October 19, 2008.

You can make use of the :hover pseudo class on the anchor tag to change the anchor’s style attributes. Typically you see this on sites that underline anchors when you mouse over them (when you hover over them). The CSS code to do this simple underlining can look like this:

a { text-decoration: none; }
a:hover { text-decoration: underline; }

We could extend this to change the background and forground colour of the link to make it appear a little more “box-like” using something like this CSS code:

a {
	display: block;
	padding: 5px 10px;
	background-color: #000000;
	color: #FFFFFF;
}
a:hover {
	background-color: #CCCCCC;
	color: #000000;
}

If you wanted to have a background image on the anchor, then you could change the background-image when you hovered over the anchor. The CSS code might look like this:

a {
	display: block;
	padding: 5px 10px;
	background: #000000 url(img/anchor_off.gif) no-repeat left top;
	color: #FFFFFF;
}
a:hover {
	background: #CCCCCC url(img/anchor_hovered.gif) no-repeat left top;
	color: #000000;
}

This technique does suffer from a flaw, however. You will invariably see a flickering as you roll over the anchor for the first time due to the browser having to request the second image (assuming the file isn’t already in the browser cache).

This problem can be fixed by using the same image for both the normal and hover state of the anchor – just reposition the background image on hover. This is presented very well over at A List Apart where Dave Shea introduces the concept of CSS Sprites. The image below (195px wide, 30px high in size) shows how you might set this up:

The image above shows both states of the anchor… the initial state at the “left top” and the hovered state “100px” from the left of the image. The following CSS code shows how you can reposition the background image to show a different image on hover – without the flicker:

a {
	display: block;
	padding: 5px 10px;
	width: 95px;
	height: 30px;
	overflow: hidden;
	background: #000000 url(img/anchor_background.gif) no-repeat left top;
	color: #FFFFFF;
}
a:hover {
	background-position: 100px top;
	background-color: #CCCCCC;
	color: #000000;
}

You may have to deal with all the anchor pseudo classes to get the effect consistent in all browsers, and be sure to define them in the correct order… :link, :visited, :hover, :active.

Finally, Internet Explorer only supports pseudo classes on the anchor element. All other browsers support pseudo classes on all elements. You could use this technique on non-anchor elements, but would be forced to introduce some javascript to support Internet Explorer. A good working example of this is the popular Suckerfish dropdowns CSS menu solution that uses :hover on the list item element and attaches some javascript for Internet Explorer.

Post to Twitter

Tags: , ,

Comments

There are no responses to this post.

Leave a reply

Comments are closed for this post.