Stu Nicholls | CSSplay | CSS only background hover color change

Information

This demonstration shows basic index card information with a change of background color on hover.

The method uses just one background image and allows the index card to grow vertically with the content. You can also set the width to any size as long as it is smaller the the image width.

Using the image below you can have any width from 100 pixels, which is the width of the tab, to 300 pixels but you can increase the width of the image if you want to go wider.

This has been tested in Firefox, Opera, Mozilla, Netscape, IE7 and IE6. It should also work in Safari, Camino and Konqueror.

The single image is shown below:

Although changing the background color on hover is not a new idea and is used all over the web, and, as Mauricio Samy Silva points out, the idea to produce this demo came from Veerle's blog, it does use a totally different method of styling.
Instead of being restricted to a single width container that uses background image repositioning, this one uses a single static image with background color changes. This way you can have any color change you like and the container can be resized in both directions without the need to redo the background image.

The fact that this works in IE6 (and IE5.5 with box model corrections) by using conditional comments is a bonus that you can use if you wish.

Apolgies to Veerle if this was seen as 'taking without linking'.

Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.