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

this will handle your issue. clone the clicked item(add true if you want to save click event and other handlers) insert it after itself so it has the same place in the dom. then remove it. the clone will not be stuck with the hover state stuck. All references are relative (this) so it'll work anywhere without changing selectors.

        $("#elementwithhover").click(function() { 
            // code that makes element or parent slide or 
            // otherwise move out from under mouse. 
            $(this).clone(true).insertAfter($(this));
            $(this).remove();
        });

Answer 2

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/