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

问题描述

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

I am building an app that allows you to move list items from one list to another by simply clicking on them. However, in order for the user to know what the intended action for a clik is, I set up a :hover state in the CSS which shows an instruction such as "<< move"

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

The problem I have found however is that in Internet Explorer (tested versions 7-9), when I move a DOM element the :hover state of that element remains (becomes sticky), even when the mouse is moved around. The :hover state only disappears when a user hovers over the item in it's new location and then moves their mouse away. This is an Internet Explorer only issue it seems.

如果您使用 IE，您可以通过转到 http://jsfiddle.net/hc2Eu/32/

You can see the problem if you are using IE by going to http://jsfiddle.net/hc2Eu/32/

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

There is of course a workaround which is to not use CSS :hover state and use a JQuery hover event instead, but this is certainly not the best way of doing things, and keeping elements :hover state controlled in CSS is by far and away the most robust way of doing this. The workaround can be seen at http://jsfiddle.net/hc2Eu/29/

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

Has anyone figured out how I can tell Internet Explorer somehow that an element is no longer under the mouse, and it should release the :hover state?

马特

推荐答案

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

Try cloning the element instead of appending it directly. When you append, you're taking the element from it's current position and state in the DOM and placing it in its new position - basically just moving it. IE is clearly not repainting the element when this happens, or resetting its state until you mouseover.

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

By cloning it, you force IE to create a new element, which, since it's not on the page, can't have the hover state applied to it anyway. Then just append it in its new container, remove the original, and you're done.

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

See an example in this fiddle: Two lines of code, cross-browser, and you'll remain concise and not pollute your code. :)

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

这篇关于Internet Explorer:当目标 DOM 元素在 DOM 中移动时，悬停状态变为粘滞状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！