CSS Hover tips...

A previous professor of mine is still teaching me even though I am no longer in her class. I just learned a valuable CSS hover tip from the awesome Jennifer Campion of Interface Technical Training.

Normally in CSS when using Anchor Pseudo-classes you would have link 4 states.

1. a:link (equals the unvisited link state)
2. a:visited (equals the visited link state)
3. a:hover (equals the mouse over/hover link state)
4. a:active (equals the selected link state)

For the most part I would use a:link, a:visited and a:hover. However, when using it for a hover button I would only need to use a:link and a:hover. Which required two images. Well from what I recently learned, this is not the case anymore. Now you will only need to maintain one image file.

Before: two images
[Active image] 64X63


[Mouse over/Hover image] 64X63


Now: one image
[Active/Hover image all in one] 128X63


[CSS]


Notice the a#hovertest:hover on line 9 of the CSS file.

background-position: 64px 0;
It basically means on hover jump to the 64th pixel of the horizontal position and to the 0 pixel of the vertical position. Below is the zoomed in version of the all-in-one graphic to illustrate the horizontal and vertical positions.

[Zoomed Image]



[HTML]


Video Tip In Action