javascript - IE8: CSS ホバー中にノードを削除すると、ホバー状態が固定される

Question

重複の可能性:
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
}