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 for a clik is, I set up a :hover state in the CSS which shows an instruction such as "<< move"

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.

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

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/

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

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/