IE8：在CSS悬停期间删除节点会导致悬停状态停留

Question

  

可能重复：
  Internet Explorer :hover state becomes sticky when the target DOM element is moved in the DOM

我正在开发一个系统，通过使用附加到表行的移动弹出菜单，可以将行动态添加到表中。此菜单包含选项 - “在上方添加行”，“在下方添加行”和“删除行”，并且每个选项都设置为具有css悬停背景颜色效果。有一个按钮显示菜单，当鼠标移动到另一行时，按钮随之移动。

当它的CSS悬停效果处于活动状态时，Internet Explorer 8似乎在从DOM中删除元素时遇到问题。这样做会导致悬停状态粘住，因此下次打开菜单时，它仍然会突出显示所选的最后一个选项。当鼠标移过鼠标并再次退出时，悬停状态将重置为正常状态。

此问题仅在我更改代码后才开始发生 - 之前我没有在插入之前从行中删除菜单，但我现在删除然后重新附加它。我需要这样做，因为有些情况下必须从DOM中删除菜单（例如，当删除表的最后一行时）。

这是已知行为吗？

BulkUpdateTable.prototype.addRow = function (isBefore) {
    var sourceRow = this.rowMod.parentNode.parentNode; // rowMod > td > tr
    sourceRow.firstChild.removeChild(this.rowMod); // Remove menu
    var newRow = sourceRow.cloneNode(true);
    var newRowFirstCell = newRow.firstChild;

    var origTableBody = sourceRow.parentNode;
    var tableBodyCopy = origTableBody.cloneNode(true); // Create in-memory copy of table body (allows for efficient editing without repeated redraws)
    var sourceRowCopy = tableBodyCopy.childNodes[getNodeIndexInParent(sourceRow)]; // Find corresponding row in copied table
    tableBodyCopy.insertBefore(newRow, isBefore ? sourceRowCopy : sourceRowCopy.nextSibling);
    this.incrementIdsFromNode(isBefore ? sourceRowCopy : newRow);
    origTableBody.parentNode.replaceChild(tableBodyCopy, origTableBody); // Replace table with updated copy. Note: Source nodes, event.srcElement, etc are no longer part of document

    this.rowModMenu.style.visibility = 'hidden'; // Dismiss menu
}