javascript - 在宏伟的弹出窗口初始化后记住悬停时的 div 顶部位置

Question

我一直在使用 magnific popup，这是一个很棒的小脚本。不过我最近遇到了一个问题。

我在 codepen 上做了一个例子来隔离问题 - http://codepen.io/patrickwc/pen/xiajJ

基本上，当您将鼠标悬停在 figure 元素上时，figcaption 通过更改 top 值向上移动。然后我在整个 figcaption 元素上创建了一个绝对定位的链接，这样当您再次单击或点击时，链接放大弹出窗口就会被激活。这部分工作正常，但出于某些原因，在某些浏览器中，当您退出放大的弹出窗口(关闭或单击外部没有区别)时，figcaption 元素会“卡住”。我希望它返回到悬停事件之前的位置，就像在大多数浏览器中一样。但出于某种原因，在 IE11 和 Chrome Canary(最新稳定的 Chrome 很好)中似乎记得该元素已悬停，并且图形标题框卡在那里，除非您再次悬停。

您可以在大多数浏览器中看到的常见行为。

关闭弹出窗口后的 IE11 和 Chrome Canary(版本 39.0.2152.0 canary):

有趣的是，这不会发生在 browserstack 上。我有 Windows 8.1 和 Chrome Canary 37，以及 IE11，在 browserstack 上的行为很好，但在我或其他 PC 上却不行。

我意识到我可能应该使用转换来获得硬件加速转换，但我需要 IE8 支持。我现在要看看变换是否有任何不同，但我猜它们不会。也许我必须使用 js 而不是悬停事件来移动 figcaption 元素？

Answer 1

因此，我从 magnific popup 的开发者和我的一个 javascript wizz friend 那里得到了一些帮助。 .open-popup-link 标签被聚焦，一旦弹出窗口关闭。我发现了 jquery 的 blur event并且以下代码修复了该问题，该问题仅发生在 IE11 和 Chrome Canary(v38 和 39)中。

jQuery('.open-popup-link').on('focus',function(){
    jQuery(this).blur();
})