I have script that handles image rollovers with css. What I would like to know if this the proper way of doing a CSS rollover? I also wanted to know if this is good how do you handle other rollover images do you have to have a separate css for each image?
Here is an example: http://jsfiddle.net/GFec3/40/
CSS Code:
a.rollover {
display: block;
width: 27px;
height: 25px;
text-decoration: none;
background: url("http://www.gdisinc.com/barker/images/menubar/bnt_facebook.jpg");
}
a.rollover:hover {
background-position: -350px 0;
}
.displace {
position: absolute;
left: -5000px;
}
HTML
<a href="#" class="rollover" title="Webvamp" width="54" height="25"><span class="displace">TEST</span></a>
This works but just wanted to know is there a special way to handle more then one rollover image?