У меня есть скрипт, который динамически добавляет полные изображения поверх миниатюр, когда вы наводите на них курсор мыши. Я также дал полным изображениям стиль CSS: hover, чтобы они расширялись до большей ширины (где обычно они ограничены размерами эскиза). Это прекрасно работает, если изображение загружается быстро или кэшируется, но если загрузка полного изображения занимает много времени, и вы не перемещаете мышь во время загрузки, то, как только оно появляется, оно обычно остается на ширине эскиза ( не: стиль наведения), пока вы снова не переместите мышь. Такое поведение наблюдается во всех браузерах, в которых я его пробовал. Мне интересно, если это ошибка, и есть ли способ ее исправить или обойти.

Возможно, стоит отметить, что я также пытался сделать то же самое в Javascript с.on('mouseenter')и столкнулся с той же проблемой.

Из-за характера проблемы ее может быть трудно воспроизвести, особенно если у вас быстрое соединение. Я выбрал для демонстрации большую фотографию из Википедии, но чтобы она работала, вам, возможно, придется заменить ее на что-то особенно большое или из медленного домена. Также обратите внимание, что вам может потребоваться очистить кэш для последующих попыток.

Если вы все еще не можете воспроизвести, вы можете добавить искусственную задержку кfullimage.load до звонкаanchor.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

Обновлена корзина JS с добавлением 1,5-секундной задержки (надеюсь, проблема прояснится)

Еще раз: для воспроизведения проблемы необходимо очистить кэш большого изображения, а затем навести курсор мыши на исходное изображение, чтобы начать загрузку большого изображения, а затем не перемещать мышь во время загрузки. Предусмотренное поведение для большого изображения, чтобы правильно взять псевдокласс: hover, когда оно в конечном итоге загружается. Проблема, которую я вижу, когда загрузка занимает более ~ 0,75 с, заключается в том, что она не включается: зависайте, пока вы немного не покачиваете мышью.

редактироватьСм. Мои комментарии к ответу @ LucaFagioli для получения более подробной информации о моем случае использования.

Редактировать, продолжениеЯ думал, что уже сделал это, но я просто попытался воспроизвести проблему в Firefox, и я не смог. Возможно, это ошибка Chrome?