IE9 is not removed: hover style when changing DOM

Question

I am trying to create a button that has: hovering in a pop-up window, when you are one of the buttons, I remove the window from the DOM and save it for future interaction. the problem is that when I connect it to the DOM in IE9, it did not clear the state: hover until you hover it below and then mouse out.

Obviously, this is not in any other browser, but reproducible here: http://jsfiddle.net/5dXSp/

I cannot find a manual way to clear the state of css: hover, and I really do not want to rebuild the menu every time because of this. Any thoughts?

Answer 1

Try to control class hover and jQuery. It seemed to work for me: http://jsfiddle.net/5dXSp/25/

CSS

.box{ height:200px; margin:10px 0; } .button{ display:block; width:200px; height:20px; background:#ccc; } .hover { background-color: #000; }​ 

JQuery

 $(".button").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } ); $(".button").click(function(ev){ ev.preventDefault(); $(ev.target).appendTo($(".catch")); $(this).removeClass("hover"); }); 

Answer 2

There is another way to fix it. You can hide an element before disconnecting it from the DOM, but in a different event handling. Something like that:

 // HTML structure: <div id="aaa"> <a id="bbb"> Text </a> </div> var bbb = document.getElementById('bbb'); var container = document.getElementById('aaa'); bbb.attachEvent("onclick", function() { bbb.style.display = "none"; window.setTimeout(function() { container.removeChild(bbb); bbb.style.display = ""; // Some time later window.setTimeout(function() { container.appendChild(bbb); }, 2000); }, 1); }); 

bbb.style.visibility = "hidden" also works.

Answer 3

with jquery you can do ugly things like:

 if($.browser.msie) $('el').html($(el).html()); 

to de and attach the element