Problema con la clase :hover (Pantallazo al pasar mouse)

[matheus_rostenkowski]

Muy buenas amigos! Sigo desde hace mucho este fantástico sitio que siempre me a servido de ayuda a la hora de solucionar mis problemas, así y todo, esta es mi primera intervención y es que tengo un problema con la clase :hover de CSS que me trae la cabeza loca.

El código que tengo es el siguiente:

#spotitab{
background:url(../imagenes/tablon/spoti.png) no-repeat;
width:150px;
height:150px;
margin-left:30px;}

#spotitab:hover{ background:url(../imagenes/tablon/spoti2.png) no-repeat;}

Como se puede apreciar, la idea es que al pasar el mouse por encima, la imagen que tengo por defecto se me cambie. Pues hasta ahí todo bien.
El problema está en que por algún motivo que desconozco, al pasar el ratón por encima, la imagen me desaparece y me vuelve a aparecer. Es decir, en lugar de pasar de foto1 a foto2, el efecto que me crea es foto1, desaparece, foto 2.

¿Cómo podría solucionarlo?

Muchisimas gracias de antemano!

[pzin]

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:

#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:

#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.

[matheus_rostenkowski]

Iniciado por pzin

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:

#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:

#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.

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!

[pzin]

Pues si son imágenes con poco peso, que otro lado es lógico siendo de 150*150 (no caí ) tendrá que ser por alguna otra cosa. ¿Lo tienes subido a algún sitio para poder verlo en vivo?

[matheus_rostenkowski]

Iniciado por pzin

Pues si son imágenes con poco peso, que otro lado es lógico siendo de 150*150 (no caí ) tendrá que ser por alguna otra cosa. ¿Lo tienes subido a algún sitio para poder verlo en vivo?

Se trata de la web de un grupo de música, aquí dejo el enlace ;)

http://www.theskarnivals.com

[ArturoGallegos]

si es problema de la imagen, si te fijas solo tarda un segundo en aparecer y si haces hover una segunda vez el problema ya no se presenta, ya que se encuentra en cache y no es necesario volver a descargarla.

por otro lado debes replantearte el formato de las imágenes y el optimizarlas, viendo las imágenes las tienes en PNG, por el tipo de imagen tu mejor opción seria usar un JPG.

Para ilustrarte de que hablo he bajado la imagen "castelo2.png"
si la optimizas con el programa "PNG Gauntlet", su peso se reduciría en un 9%
pasando de 90.8kb a 82.9kb
mientras que si usaras JPG te ahorrarías un 78.52%
pasando de 90.8kb a 19.5kb

Como veras dejando de lado el mito de "usar PNG es la mejor opción", la mejor opción siempre es considerar el tipo de imagen y su finalidad, ya que algunas veces resulta contraproducente.