Cómo asegurar que CSS: hover se aplique al elemento agregado dinámicamente

Tengo una secuencia de comandos que agrega imágenes completas dinámicamente sobre las miniaturas cuando pasas el cursor sobre ellas. También les he dado a las imágenes completas un estilo CSS: hover para hacer que se expandan a un ancho mayor (donde normalmente están limitadas a las dimensiones de la miniatura). Esto funciona bien si la imagen se carga rápidamente o se almacena en la memoria caché, pero si la imagen completa tarda mucho tiempo en cargarse y no mueve el mouse mientras se está cargando, una vez que aparece, generalmente permanecerá en el ancho de la miniatura (el non-: hover style) hasta que mueva el mouse nuevamente. Tengo este comportamiento en todos los navegadores en los que lo he probado. Me pregunto si se trata de un error y si hay una manera de solucionarlo o solucionarlo.

Puede que valga la pena señalar que también he intentado hacer lo mismo en Javascript con.on('mouseenter'), y encontré el mismo problema.

Debido a la naturaleza del problema, puede ser difícil de reproducir, especialmente si tiene una conexión rápida. Elegí una foto bastante grande de Wikipedia para demostrar, pero para que funcione, es posible que tenga que cambiarla a algo especialmente grande o de un dominio lento. También tenga en cuenta que es posible que tenga que borrar el caché para los reintentos sucesivos.

Si aún no puedes reproducir, puedes agregar un retraso artificial a lafullimage.load antes de la llamada aanchor.show().

HTML:

<img id="image" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Cairo_International_Stadium.jpg/220px-Cairo_International_Stadium.jpg" />

CSS:

.kiyuras-image {
    position: absolute;
    top: 8px;
    left: 8px;
    max-width: 220px;
}

.kiyuras-image:hover {
    max-width: 400px;
}

JS:

$(function () {

    var fullimageurl = 'http://upload.wikimedia.org/wikipedia/commons/3/32/Cairo_International_Stadium.jpg';

    var fullimage = $('<img/>')
        .addClass('kiyuras-image')
        .load(function () {
            anchor.show();
        });

    var anchor = $('<a/>').hide().append(fullimage);

    $('body').prepend(anchor);

    $("#image").on('mouseenter', function () {
        fullimage.attr('src',fullimageurl);
        $(this).off('mouseenter');
    });

});

Js bin

Se actualizó la bandeja JS con un retraso de 1.5 segundos (con suerte se aclara el problema)

Nuevamente: la reproducción del problema implica borrar su caché de la imagen grande, y luego pasar el cursor sobre la imagen original para iniciar la carga de la imagen grande, y luego no mover el mouse mientras se está cargando. El comportamiento previsto es que la imagen grande tome la pseudo-clase: hover cuando finalmente se cargue. El problema que veo cuando tarda más de ~ 0.75 segundos en cargarse es que no se activa: desplaza el mouse hasta que muevas un poco el mouse.

Editar: Vea mis comentarios sobre la respuesta de @LucaFagioli para obtener más detalles de mi caso de uso.

Editar, la secuela: Pensé que ya había hecho esto, pero solo traté de reproducir el problema en Firefox y no pude. Tal vez este es un error de Chrome?