Internet Explorer :hover state becomes sticky when the target DOM element is moved in the DOM

Question

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

Answer 1

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.

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/