Question

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

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

我找不到一种清除css的手动方式：悬停状态，我真的不想每次都重建菜单因为这个。有什么想法吗？

Answer 1

尝试使用类和jQuery控制悬停。这似乎对我有用： 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

还有一种方法可以修复它。您可以在从DOM中分离元素之前隐藏元素，但在不同的事件处理中。这样的事情：

// 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”也有效。

Answer 3

使用jquery你可以做丑陋的事情，如：

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

去de并附加元素

IE9没有删除：DOM更改时的悬停样式

3 个答案: