0

可能重复：
Internet Explorer：当目标 DOM 元素在 DOM 中移动时，悬停状态变为粘滞状态

我正在开发一个系统，可以通过使用附加到表格行的移动弹出菜单将行动态添加到表格中。这个菜单有选项——“在上面添加行”、“在下面添加行”和“删除行”，每个选项的样式都具有 css-hover 背景颜色效果。有一个显示菜单的按钮，当鼠标移到不同的行上时，按钮随之移动。

Internet Explorer 8 在其 CSS 悬停效果处于活动状态时从 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
}
4

0 回答 0