Internet Explorer：当目标DOM元素在DOM中移动时，悬停状态变为粘性 [英] Internet Explorer :hover state becomes sticky when the target DOM element is moved in the DOM
问题描述
我正在建立一个应用程式，可让您将清单项目从一个清单移动到另一个清单，只需点击它们。然而，为了使用户知道clik的预期动作，我在CSS中设置了一个：hover状态，其显示诸如<< move
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状态保持（变粘），即使当鼠标移动周围。 ：悬停状态只有当用户将鼠标悬停在新位置中的项目上时才会消失，然后将鼠标移开。这是一个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 state并使用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某种元素不再在鼠标下，它应该释放：悬停状态？
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?
Matt
推荐答案
尝试克隆元素，而不是直接附加。当你追加时，你从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. :)
这篇关于Internet Explorer：当目标DOM元素在DOM中移动时，悬停状态变为粘性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
