IE9 not removing :hover style on DOM change

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: http://jsfiddle.net/5dXSp/

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?

Answer 1

using jquery you can do ugly things like:

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

to de and attach the element

Answer 2

Try controlling the hover with a class and jQuery. This 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 3

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