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屋!