IE9 未删除 :hover 样式更改 DOM

Posted 2023-03-06

【中文标题】IE9 未删除 :hover 样式更改 DOM

【英文标题】：IE9 not removing :hover style on DOM change

【发布时间】：2012-09-05 11:42:09

【问题描述】：

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

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

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

【问题讨论】：

我不太明白。按钮在移动到另一个位置后应该是黑色的，它没有鼠标悬停，但仍然应该应用 :hover-state 吗？如果你重新附加一个元素，它当然不会悬停。

问题是当我移动它时 :hover-state 仍然应用（在本例中为黑色），我希望它回到鼠标悬停状态（灰色）不再悬停按钮。

【参考方案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");
);

【讨论】：

谢谢你，虽然我希望对 javascript 有一种不那么侵入性的方法，但我对类名的使用越少越好，毕竟这就是 css psudo-classes 的用途!

似乎是唯一的方法，但仍然很遗憾。

【参考方案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" 也有效。

【讨论】：

谢谢，这对我来说是一个很好的解决方案。我不想仅仅因为 IE9 已经脑死，就不得不重组我的 CSS+JS。

【参考方案3】：

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

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

de 和附加元素