Bienvenido a la parte de delante de las cámaras pues.
Pues lo comentas es un poco raro, sólo se me ocurre que la segunda imagen tenga un peso considerable y tarde en cargar.
A menos que haya más código involucrado.
De todas formas, podrías hacer otra cosa. Algo que llaman
CSS sprites.
La cuestión es crear una imagen a partir de las dos que tienes, una debajo de otra por ejemplo. Donde termina una, empieza la otra. Por lo que vas a tener una imagen que mide 150 de ancho por 300 de alto.
Bueno, pues la regla #spotitab la dejas tal cual, no se hace que la cambies, y la segunda, la del :hover la eliminas y añades una en la que el fondo se alinea en la parte de abajo. Así estaría visible la "segunda parte" de la nueva imagen.
Código CSS:
Ver original#spotitab:hover {
background-position: bottom;
}
También podrías hacer que se mueva 150 pixeles hacia arriba, es lo mismo, pero igual se entiende mejor el funcionamiento.
Código CSS:
Ver original#spotitab:hover {
background-position: 0 -150px;
}
El primer valor es el ajuste horizontal, que valdría con cero, y el segundo obviamente la posición vertical.