Как убедиться, что CSS: hover применяется к динамически добавленному элементу

У меня есть скрипт, который динамически добавляет полные изображения поверх миниатюр, когда вы наводите на них курсор мыши. Я'Мы также предоставили полные изображения в стиле CSS: hover, чтобы увеличить их ширину (где обычно они ограничены размерами эскиза). Это прекрасно работает, если изображение загружается быстро или кэшируется, но если загрузка полного изображения занимает много времени, и вы нене двигайте мышь, пока онаПосле того, как он появится, он будет оставаться на ширине миниатюры (стиль не: 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');
    });

});
</a>

JS Bin

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

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

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

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

Ответы на вопрос(9)

Ваш ответ на вопрос