[SOLUCIONADO] ¿Por qué el HOVER sirve sólo 1 vez y funciona nuevamente hasta que se recarga la pág?

[berkeleyPunk]

Buen día.

La idea es esta: tenemos un link con un background-image, y queremos que cuando se pase el cursor encima se vea otra imagen de fondo. Y que cuando se vuelva a pasar el cursor encima por 2da, 3ra, 4ta, etc, vez, se vea el efecto hover. Eso es todo.

Utilizo el sig código:

Código HTML:

<a href="#n" id="linkImagen">   </a>
 

Código CSS:

#linkImagen {
    display:block;
    position:relative;
    top:0;
    left:0;
    width:200px;
    height:200px;
    background-image:url(img1.gif);
}
#linkImagen:hover {   background-image:url(img2.gif);  }
 

La pregunta es: ¿por qué este código funciona bien si las imágenes son JPG y no GIF animados?


Aquí les dejo las 2 imágenes GIF. La segunda es animada.
Imagen 1
Imagen 2 (La 2da img es un GIF animado diseñado sin loop)

Saludos cordiales.

[alzacon]

Si reabro la imagen o la refresco tampoco reaparece el destello. No va a ser que la imagen 2 tras el destello es igual q la imagen 1 y por eso no ves que cambio. El primer hover es cuando carga la imagen, los otros ya esta el gif funcionando.

[berkeleyPunk]

Iniciado por alzacon

...No va a ser que la imagen 2 tras el destello es igual q la imagen 1 y por eso no ves que cambio...

Gracias por responder amigo alzacon. Pero hasta donde entiendo, las cosas son así, a ver si me puedes corregir.

La idea del hover es que se ejecuten ciertas instrucciones cuando el cursor está encima de la imagen 1. Estas instrucciones son que se vea la imagen 2. Y que cuando ya no esté encima el cursor, se vea otra vez la imagen 1. ¿No?

Si esto es así, al quitar el cursor del link se debería ver la imagen estática y al volver a poner el cursor se debería visualizar nuevamente el gif animado con el destello. ¿No es así? ¿Entonces por qué ya no se vuelve a ver el gif animado?

¿Debo entender que sí se ve el gif animado, sólo que se ve el último frame, que es igual que la imagen estática?

¿Pero, no debería reiniciarse el gif animado una vez que quito el cursor de la imagen animada?

[alzacon]

Porque iba a reiniciarse, lo suyo es que continue por donde le toque.
Mira por ejemplo lo que pasa con este gif animado con bucle, a mi se me muestra el último frame visto y luego se actualiza (no sé si es cosa de mi viejo pc o no)
http://jsfiddle.net/7jNub/

En tu caso sería el último frame visto y el actual el mismo

[berkeleyPunk]

Iniciado por alzacon

Porque iba a reiniciarse, lo suyo es que continue por donde le toque.
Mira por ejemplo lo que pasa con este gif animado con bucle, a mi se me muestra el último frame visto y luego se actualiza (no sé si es cosa de mi viejo pc o no)
http://jsfiddle.net/7jNub/

En tu caso sería el último frame visto y el actual el mismo

Ok, bien. Entendido. Veo que el gif animado sigue su curso una vez que le paso el cursor encima a la 1ra imagen. Y por eso ya no se ve la animación en mi ejemplo, porque el gif animado terminó su movimiento con el último frame, que es igual a la imagen estática.

Yo me imaginaba que después de quitar el cursor encima de la imagen estática, debería reiniciarse el gif animado, pues entendía que el hover debe hacer que cada vez que se pone el cursor encima de la imagen se inicie nuevamente el gif animado, o lo que sea. Pero no es así.

Gracias, amigo alzacon.