1

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

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

我找不到手动清除 css :hover 状态的方法，我真的不想因此每次都重建菜单。有什么想法吗？

4

3 回答 3

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

于 2013-03-04T09:19:25.473 回答
2

尝试使用类和 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");
});
于 2012-09-12T13:34:55.303 回答
0

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

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

去除和附加元素

于 2013-10-21T12:43:38.800 回答