Make Buttons with Hover Load Faster
May 8, 2008 · Print This Article
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.
Comments
Got something to say?
You must be logged in to post a comment.