Ver Mensaje Individual
  #3 (permalink)  
Antiguo 04/06/2013, 14:00
Avatar de matheus_rostenkowski
matheus_rostenkowski
 
Fecha de Ingreso: junio-2013
Mensajes: 16
Antigüedad: 10 años, 11 meses
Puntos: 0
Respuesta: Problema con la clase :hover (Pantallazo al pasar mouse)

Cita:
Iniciado por pzin Ver Mensaje
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
  1. #spotitab:hover {
  2.   background-position: bottom;
  3. }

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
  1. #spotitab:hover {
  2.   background-position: 0 -150px;
  3. }

El primer valor es el ajuste horizontal, que valdría con cero, y el segundo obviamente la posición vertical.
Muchisimas gracias pzin! Probaré la opción CSS sprites que me comentas, había oido hablar de ella y quizá encuentre ahí la solución. En cuanto al peso de las imágenes ambas están a una resolución de 72ppp y su peso es ínfimo con respecto al que deberían tener para ralentizar imagino....

Un abrazo grande!