Question:

I am trying to make a button that has a :hover state on a popup box, when you one of the buttons I am removing the box from the DOM and saving it for future interacts. the problem is when I reattach it to the DOM in IE9 it has not cleared the :hover state until you next hover it then mouse out.

Obviously this is not present on any other browser, but is reproducible here: <a href="http://jsfiddle.net/5dXSp/" rel="nofollow">http://jsfiddle.net/5dXSp/</a>

I cant find a manual way of clearing a css :hover state, and I really dont want to have to rebuild the menu every time because of this. Any thoughts?

Try controlling the hover with a class and jQuery. This seemed to work for me: <a href="http://jsfiddle.net/5dXSp/25/" rel="nofollow">http://jsfiddle.net/5dXSp/25/</a>

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"); });

There is one additional way to fix it. You can hide element before detaching it from DOM, but <em>in a different event processing</em>. 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" worked too.

using jquery you can do ugly things like:

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

to de and attach the element