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

我有一个脚本，当您将鼠标悬停在缩略图上时，它会在缩略图上动态添加完整图像。我还为完整图像提供了 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 http://jsbin.com/ifitep/1

更新了 JS Bin，添加了 1.5 秒延迟（希望使问题更清晰） http://jsbin.com/ifitep/10

再次强调：重现问题涉及清除大图像的缓存，然后将鼠标悬停在原始图像上以初始加载大图像，然后在加载时不要移动鼠标。预期的行为是让大图像在最终加载时正确呈现 :hover 伪类。我看到的问题是，当加载时间超过 0.75 秒时，它不会进行 :hover，直到您稍微摇动鼠标。

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

编辑，续集：我以为我已经这样做了，但我只是尝试在 Firefox 中重现该问题，但无法重现。也许这是 Chrome 的一个错误？

大多数浏览器都会更新其hover仅当光标在元素上移动至少一个像素时才会出现。当光标进入缩略图的位置时img它得到hover应用并运行你的mouseenter处理程序。如果您保持光标不动直到加载全尺寸图像，您的旧img（缩略图）将保留hover状态，而新状态将无法得到它。

要使其在这些浏览器中工作，请将hoverCSS 中公共父元素的伪类；例如，将两者都括起来imgs in a span http://jsbin.com/ifitep/50.