How to make Buttons with Hover Load Faster
With CSS we can target the ‘:hover’ child class for links and update their background properties.
Example
.nav a:link, .nav a:visited {
width: 160px ; height: 30px ; display: block; overflow:hidden;
background: url(’images/nav1.gif’) 0px 0px no-repeat;
}
.nav a:hover, .nav a:active{
background-position: 0px -30px;
}
The Image itself contains both the normal and hover state. This is called a sprite, using this technique the image needs only be loaded once.
—————
Listening to: Aesop Rock - Coffee
via FoxyTunes
