Internet Explorer：当目标 DOM 元素在 DOM 中移动时，悬停状态变为粘滞状态

Posted 2023-03-06

【中文标题】Internet Explorer：当目标 DOM 元素在 DOM 中移动时，悬停状态变为粘滞状态

【英文标题】：Internet Explorer :hover state becomes sticky when the target DOM element is moved in the DOM

【发布时间】：2011-12-15 01:26:29

【问题描述】：

我正在构建一个应用程序，您只需单击它们即可将列表项从一个列表移动到另一个列表。但是，为了让用户知道点击的预期操作是什么，我在 CSS 中设置了一个 :hover 状态，它显示了诸如“

然而，我发现的问题是，在 Internet Explorer（测试版本 7-9）中，当我移动一个 DOM 元素时，该元素的 :hover 状态仍然存在（变得粘滞），即使鼠标四处移动也是如此。 :hover 状态仅在用户将鼠标悬停在新位置的项目上然后将鼠标移开时才会消失。这似乎是 Internet Explorer 唯一的问题。

如果您使用的是 IE，则可以通过转到 http://jsfiddle.net/hc2Eu/32/ 来查看问题

当然有一种解决方法是不使用 CSS :hover 状态而使用 JQuery 悬停事件，但这肯定不是最好的做事方式，并且保持元素 :hover 状态在 CSS 中控制是迄今为止并摆脱最强大的方法。解决方法见http://jsfiddle.net/hc2Eu/29/

有没有人想出如何以某种方式告诉 Internet Explorer 某个元素不再位于鼠标下方，它应该释放 :hover 状态？

马特

【问题讨论】：

“最好”的方式行不通。解决方法可以。我不明白为什么这对你来说是个问题。

这是一个问题，因为它是浏览器故障，所以每次我添加代码来修复浏览器问题时，我都会污染我的代码。为了保持代码的可读性和简洁性，我喜欢尽可能避免使用变通方法。

【参考方案1】：

尝试克隆元素而不是直接附加它。当您追加时，您将元素从其在 DOM 中的当前位置和状态中取出，并将其放置在新位置 - 基本上只是移动它。发生这种情况时，IE 显然不会重新绘制元素，或者在鼠标悬停之前重置其状态。

通过克隆它，你会强制 IE 创建一个新元素，因为它不在页面上，所以无论如何都不能应用悬停状态。然后只需将其附加到新容器中，删除原始容器，就完成了。

请参阅此小提琴中的示例：两行代码，跨浏览器，您将保持简洁且不会污染您的代码。 :)

http://jsfiddle.net/hc2Eu/36/

【参考方案2】：

这将解决您的问题。克隆单击的项目（如果要保存单击事件和其他处理程序，请添加 true）将其插入到自身之后，使其在 dom 中具有相同的位置。然后删除它。克隆不会卡住悬停状态。所有引用都是相对的（this），因此它可以在任何地方工作而无需更改选择器。

        $("#elementwithhover").click(function()  
            // code that makes element or parent slide or 
            // otherwise move out from under mouse. 
            $(this).clone(true).insertAfter($(this));
            $(this).remove();
        );