Io utilizzo questa tecnica:

Creo un immagine che ha sia la parte on che quella over, solitamente una sotto l'altra e poi applico questo CSS

codice:
#bar1 a {display:block; width: 79px; height: 84px; background: url(percorso immagine) 0 0 repeat; margin: 0; padding: 0; } 
#bar1 a:hover {background-position: 0 -84px; }
Come vedi faccio vedere subito una porzione di immagine alta 84px e successivamente l'altra parte alta sempre 84px.