CSSPLAY

CSS DEMOS › Background hover colors

Date : 11th May 2007

For all modern browsers

• Firefox

  Get Firefox with Google Toolbar

  The award-winning Web browser just got better. It's free and easy to use. Join the millions of people worldwide enjoying a better Web experience.
  Download Firefox - Free

  
• Opera

  Your life at your fingertips

  Try Speed Dial™ in Opera's newest Web browser, Opera 9.20. It makes the fastest even faster.
  Download Opera for Windows

  
• Explorer

  Get Internet Explorer 7 for your operating system

  Upgrade with confidence. Get downloads for Internet Explorer 7, including recommended updates as they become available.
  Internet Explorer 7 Download

  

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

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. 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.