Javascript 如何确保CSS:hover应用于动态添加的元素

我有一个脚本，当您将鼠标悬停在缩略图上时，它会在缩略图上动态添加完整图像。我还为完整图像提供了CSS:hover样式，以使它们扩展到更大的宽度（通常情况下，它们被限制为缩略图的尺寸）。如果图像加载速度很快或已缓存，则此方法可以正常工作，但如果加载完整图像需要很长时间，并且在加载过程中您不移动鼠标，则一旦出现，它通常会保持缩略图宽度（非：悬停样式），直到您再次移动鼠标。在我尝试过的所有浏览器中都会出现这种行为。我想知道这是否是一个bug，是否有办法修复或解决它

值得注意的是，我也曾尝试在Javascript中使用

.on（'mouseenter'）

执行相同的操作，但遇到了相同的问题

由于问题的性质，它可能很难重现，特别是如果您有一个快速连接。我从维基百科上选择了一张较大的照片来演示，但要让它发挥作用，你可能需要将它改成特别大的图片，或者从一个较慢的域中。还请注意，您可能需要清除缓存以进行连续重试

如果仍然无法复制，可以在调用

anchor.show（）

之前向

fullimage.load

添加人工延迟

HTML:

JS:

$（函数（）{
var fullimageurl=http://upload.wikimedia.org/wikipedia/commons/3/32/Cairo_International_Stadium.jpg';
var fullimage=$（''）
.addClass（'kiyuras-image'）
.load（函数（）{
show（）；
});
var anchor=$（'


再次：复制问题涉及清除大图像的缓存，然后将鼠标悬停在原始图像上以初始加载大图像，然后在加载过程中不移动鼠标。预期的行为是大图像在最终加载时正确地使用：hover伪类。问题我看到它何时加载加载时间小于0.75秒的原因是它不会出现：悬停直到你轻轻晃动鼠标

编辑：有关我的用例的更多详细信息，请参阅我对@LucaFagioli答案的评论

编辑，续集：我以为我已经这样做了，但我只是试图在Firefox中重现这个问题，但我做不到。也许这是一个Chrome错误？
如果选择器正确，CSS将应用于所有元素，动态或其他。这包括所有伪类，并且会随着DOM中属性的更改而更改。
从问题的这一部分可以看出：“如果图像加载速度快或缓存了，这很好，但是如果加载整个图像需要很长时间，并且在加载过程中您不移动鼠标，”

是否值得先使用JavaScript“预加载”所有图像。这可能允许首先成功加载所有图像，并且对于连接速度较慢的用户来说，这可能更方便用户使用。
您可以这样做：

总之，在图像前面附加加载布局，然后使用
.load（）
回调函数附加包含大图像的div以删除加载层

由于时间不够，上面的小提琴没有被简化和清理，但是如果需要的话，我可以明天继续做

$imageContainer = $("#image-container");    
$image = $('#image');

$imageContainer.on({
    mouseenter: function (event) {    
       //Add a loading class
       $imageContainer.addClass('loading');
       $image.css('opacity',0.5); 

       //Insert div (for styling) containing large image            
       $(this).append('<div><img class="hidden large-image-container" id="'+this.id+'-large" src="'+fullimageurl+'" /></div>');

       //Append large image load callback            
       $('#'+this.id+'-large').load(function() {
           $imageContainer.removeClass('loading');
           $image.css('opacity',1);
           $(this).slideDown('slow');
           //alert ("The image has loaded!");        
       });
    },            
    mouseleave: function (event) {
       //Remove loading class
       $imageContainer.removeClass('loading');
       //Remove div with large image 
       $('#'+this.id+'-large').remove();
       $image.css('opacity',1);             
    }        
});

$imageContainer=$（“#图像容器”）；
$image=$（“#image”）；
$imageContainer.on({
鼠标指针：函数（事件）{
//添加加载类
$imageContainer.addClass（'loading'）；
$image.css（'opacity'，0.5）；
//插入包含大图像的div（用于样式设置）
$（此）。附加（“”）；
//追加大图像加载回调
$（'#'+this.id+'-large'）.load（函数（）{
$imageContainer.removeClass（'loading'）；
$image.css（'opacity'，1）；
$（this.slideDown（'slow'）；
//警报（“图像已加载！”）；
});
},            
mouseleave：函数（事件）{
//删除加载类
$imageContainer.removeClass（'loading'）；
//删除带有大图像的div
$（'#'+this.id+'-large'）.remove（）；
$image.css（'opacity'，1）；
}        
});

编辑

这是一个新版本的提琴，包括大小合适的加载层，在显示大图片时带有动画：

希望这会有所帮助，在没有图像可下载之前，不要让IMG标记添加到DOM中。这样，加载事件在图像加载之前不会触发。以下是修改后的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(); // Only happens after IMG src has loaded
        });

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

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

    $("#image").on('mouseenter', function () {
        fullimage.attr('src',fullimageurl); // IMG has source
        $(this).off('mouseenter');
        anchor.append(fullimage); // Append IMG to DOM now.
    });

});

$（函数（）{
var fullimageurl=http://upload.wikimedia.org/wikipedia/commons/3/32/Cairo_International_Stadium.jpg';
var fullimage=$（''）.hide（）；
$（'body'）。前置（锚定）；
$（“#image”）.on（'mouseenter'，function（）{
attr（'src'，fullimageurl）；//IMG有源代码
$（this.off（'mouseenter'）；
append（fullimage）；//立即将IMG追加到DOM。
});
});
我不能100%确定为什么只在鼠标轻微移动时才会触发
：hover
声明。可能的原因是，从技术上讲，您可能不会真正悬停元素。基本上，在加载元素时，您将元素推到光标下（在大图像完全加载之前，
A
元素具有
display:none
，因此不可能处于
：hover
状态）。同时，这并不能解释小图像的区别

因此，一种解决方法是只使用JavaScript，不使用
：hover
语句。只需根据悬停状态（在JavaScript中切换）向用户显示两个不同的
IMG
元素。作为一个额外的优势，图像不必由浏览器动态缩放（铬合金中存在视觉故障）

看

更新：B
$(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');
    });

});

$imageContainer = $("#image-container");    
$image = $('#image');

$imageContainer.on({
    mouseenter: function (event) {    
       //Add a loading class
       $imageContainer.addClass('loading');
       $image.css('opacity',0.5); 

       //Insert div (for styling) containing large image            
       $(this).append('<div><img class="hidden large-image-container" id="'+this.id+'-large" src="'+fullimageurl+'" /></div>');

       //Append large image load callback            
       $('#'+this.id+'-large').load(function() {
           $imageContainer.removeClass('loading');
           $image.css('opacity',1);
           $(this).slideDown('slow');
           //alert ("The image has loaded!");        
       });
    },            
    mouseleave: function (event) {
       //Remove loading class
       $imageContainer.removeClass('loading');
       //Remove div with large image 
       $('#'+this.id+'-large').remove();
       $image.css('opacity',1);             
    }        
});

$(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(); // Only happens after IMG src has loaded
        });

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

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

    $("#image").on('mouseenter', function () {
        fullimage.attr('src',fullimageurl); // IMG has source
        $(this).off('mouseenter');
        anchor.append(fullimage); // Append IMG to DOM now.
    });

});

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

$(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);

    $('.kiyuras-image').on('mouseout',function(){
        $(this).addClass('not-hovered');
    });
    $('.kiyuras-image').on('mouseover',function(){
        $(this).removeClass('not-hovered');
    });

    $("#image").one('mouseover', function(){
        fullimage.attr('src',fullimageurl);
    });
});

.kiyuras-image{
    position: absolute;
    top: 8px;
    left: 8px;
    max-width: 400px;
}
.kiyuras-image:not(:hover) {
    position: absolute;
    top: 8px;
    left: 8px;
    max-width: 220px;
}