IE9不移除：hover样式对DOM的改变 [英] IE9 not removing :hover style on DOM change

问题描述

我想在弹出框上创建一个具有：hover状态的按钮，当我从DOM中删除该框并保存以供将来交互时使用其中一个按钮。问题是当我把它重新连接到DOM在IE9它没有清除：hover状态，直到你下一个悬停然后鼠标出来。

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.

显然，这不存在任何其他浏览器，但可在此重现： http://jsfiddle.net/5dXSp/

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

我找不到手动清除css：hover状态的方法，我真的不想每次重建菜单，因为这个。任何想法？

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?

推荐答案

尝试使用类和jQuery控制悬停。这似乎对我有用：
http://jsfiddle.net/5dXSp/25/

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

这篇关于IE9不移除：hover样式对DOM的改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！