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

Question

我正在构建一个应用程序，允许您移动列表项目从一个列表到另一个简单地点击它们。但是，为了让用户知道clik的预期操作是什么，我在CSS中设置了一个:hover状态，它显示了一条指令，比如"<< move“。

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

如果您正在使用IE，您可以转到http://jsfiddle.net/hc2Eu/32/查看该问题

当然还有一种变通的方法，那就是不使用CSS :hover状态，而是使用JQuery悬停事件，但这肯定不是最好的方法，并且在CSS中控制元素:hover状态是迄今为止最健壮的方法。可以在http://jsfiddle.net/hc2Eu/29/上查看解决方法

有没有人知道如何告诉Internet Explorer一个元素不再位于鼠标下方，它应该释放:hover状态？

哑光

Answer 1

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

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

看看这个小提琴中的例子:两行代码，跨浏览器，你将保持简洁，不会污染你的代码。:)

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

Answer 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();
        });