如何确保CSS：将悬停应用于动态添加的元素 [英] How to ensure CSS :hover is applied to dynamically added element

问题描述

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

<可能值得注意的是，我也尝试在Javascript中使用 .on（'mouseenter'）来做同样的事情，并且遇到了同样的问题。 p>

由于问题的性质，可能很难重现，特别是如果您有快速连接。我选择了来自维基百科的一张很大的照片来演示，但为了使它工作，您可能必须将其更改为特别大或来自缓慢域的内容。另外请注意，您可能必须清除连续重试的缓存。

如果仍然无法重现，可以在 fullimage.load ，然后调用 anchor.show（）。

HTML ：

 < img id =imagesrc =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：

<$ $（$）$（$）$（$） ;

var fullimage = $（'< img />'）
.addClass（'kiyuras-image'）
.load（function（）{
）anchor.show（）;
}）;

var anchor = $（'< a />'）。hide（）。append（fullimage）;
（'mouseenter'，function（）{
fullimage.attr（）; $ b $（'body'）。prepend（anchor）;

$（＃image 'src'，fullimageurl）;
$（this）.off（'mouseenter'）;
}）;

}）;

JS Bin

更新的JS Bin添加了1.5秒的延迟（希望使问题更清晰）

同样：重现问题包括清除大图像的缓存，然后将鼠标悬停在原始图像上以初始加载大图像，然后在加载时不移动鼠标。预期的行为是大图像在最终加载时适当地使用：hover伪类。问题我发现加载时间超过0.75秒需要的时间不长：直到您稍微松动鼠标。

编辑：看看我对@ LucaFagioli的回答了解我的用例的更多详细信息。

编辑，续集：我以为我已经做到了这一点，但我只是试图在Firefox中重现这个问题，但我不能。或许这是一个Chrome浏览器的bug？

解决方案

大多数浏览器更新它们的 hover 仅当光标在元素上移动至少一个像素时才会声明。当光标进入缩略图的 img 时，它会得到 hover 并运行你的 mouseenter 处理程序。如果你保持光标不变，直到全尺寸的图像加载，你的旧的 img （缩略图）将保持 hover 状态，新的不会得到它。

为了在这些浏览器中正常工作，请将 hover 伪类到CSS中的通用父元素;例如将 img 放入 span 。

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.

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.

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.

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

Updated JS Bin with 1.5-second delay added (Hopefully makes issue clearer)

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.

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

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?

解决方案

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.

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.

这篇关于如何确保CSS：将悬停应用于动态添加的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！