Question

我正在构建一个应用程序，允许您通过单击它们将列表项从一个列表移动到另一个列表。但是，为了让用户知道clik的预期操作是什么，我在CSS中设置了一个：悬停状态，显示诸如“＆lt;＆lt; move”之类的指令

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

如果您通过转到http://jsfiddle.net/hc2Eu/32/

使用IE，则可以看到问题

当然有一种解决方法是不使用CSS：悬停状态并使用JQuery悬停事件，但这肯定不是最好的处理方式，并且保留元素：在CSS中控制的悬停状态是到目前为止并且这是最强有力的方式。可以在http://jsfiddle.net/hc2Eu/29/

查看解决方法

有没有人想办法告诉我如何以某种方式告诉Internet Explorer一个元素不再在鼠标下面，它应该释放：悬停状态？

马特

Answer 1

尝试克隆元素而不是直接附加元素。当你追加时，你从元素的当前位置和状态中取出元素并将其置于新的位置 - 基本上只是移动它。当发生这种情况时，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();
        });

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

2 个答案: