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

2022-01-22 00:00:00 hover jquery javascript html css

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

I have a script that adds full images dynamically over thumbnails when you hover over them. I've also given the full images a CSS :hover style to make them expand to a larger width (where normally they are constrained to the dimensions of the thumbnail). This works fine if the image loads quickly or is cached, but if the full image takes a long time to load and you don't move the mouse while it's loading, then once it does appear it will usually stay at the thumbnail width (the non-:hover style) until you move the mouse again. I get this behavior in all browsers that I've tried it in. I'm wondering if this is a bug, and if there's a way to fix or work around it.

值得注意的是，我也尝试在 Javascript 中使用 .on('mouseenter') 做同样的事情，但遇到了同样的问题.

It may be worth noting that I've also tried to do the same thing in Javascript with .on('mouseenter'), and encountered the same problem.

由于问题的性质，它可能难以重现，尤其是在您有快速连接的情况下.我从 Wikipedia 中选择了一张较大的照片进行演示，但要使其正常工作，您可能必须将其更改为特别大的内容或来自慢速域的内容.另请注意，您可能必须清除缓存以进行连续重试.

Due to the nature of the issue, it can be hard to reproduce, especially if you have a fast connection. I chose a largish photo from Wikipedia to demonstrate, but to make it work you might have to change it to something especially large or from a slow domain. Also note that you may have to clear the cache for successive retries.

如果仍然无法重现，可以在调用 anchor.show() 之前为 fullimage.load 添加人为延迟.

If you still can't reproduce, you can add an artificial delay to the fullimage.load before the call to 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 Bin 添加了 1.5 秒的延迟(希望使问题更清晰)

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

Again: Reproducing the issue involves clearing your cache of the large image, and then hovering over the original image to initial the loading of large image, then not moving your mouse while it's loading. Intended behavior is for the large image to properly take on the :hover pseudo-class when it eventually loads. Issue I see when it takes longer than ~0.75 secs to load is that it does not take on :hover until you jiggle the mouse a little.

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

Edit: See my comments on @LucaFagioli's answer for further details of my use case.

编辑，续集:我以为我已经这样做了，但我只是尝试在 Firefox 中重现该问题，但我做不到.也许这是一个 Chrome 错误?

Edit, the sequel: I thought I already did this, but I just tried to reproduce the issue in Firefox and I couldn't. Perhaps this is a Chrome bug?

推荐答案

大多数浏览器仅在光标在元素上移动至少一个像素时才更新其 hover 状态.当光标进入缩略图的 img 时，它会应用 hover 并运行您的 mouseenter 处理程序.如果在加载完整尺寸的图像之前保持光标不动，则旧的 img(缩略图)将保持 hover 状态，而新的将不会得到它.

Most browsers update their hover states only when the cursor moves over an element by at least one pixel. When the cursor enters the thumbnail's img it gets hover applied and runs your mouseenter handler. If you keep your cursor still until the full-sized image loads, your old img (the thumbnail) will keep the hover state and the new one won't get it.

要让它在这些浏览器中工作，请将 hover 伪类移动到 CSS 中的公共父元素；例如，将两个 img 包含在 span.

To get it working in these browsers, move the hover pseudo-class to a common parent element in the CSS; for example, enclose both imgs in a span.

相关文章