如何使CSS样式覆盖JavaScript应用的样式

我动态创建一个HTML表，并应用一些样式：

var tbl = document.createElement('table');

tbl.id = "CrewMemberTable";

document.getElementById("CrewMemberPanel").appendChild(tbl);

然后，我在表中插入行和单元格（为简便起见，在此示例中仅插入三行）：

CrewRow = document.getElementById("CrewMemberTable").insertRow(-1);

CrewCell = CrewRow.insertCell(-1); CrewCell.innerHTML = "this text";
CrewCell = CrewRow.insertCell(-1); CrewCell.innerHTML = "some text";
CrewCell = CrewRow.insertCell(-1); CrewCell.innerHTML = "more text";

在最后一个单元格中，我通过javascript应用了一种样式：

CrewCell = CrewRow.insertCell(-1); CrewCell.innerHTML = "more text";
CrewCell.style.backgroundColor = "GREEN";

最后，我的.CSS样式表中有这种样式：

#CrewMemberTable tr:hover {
    background-color: RED !important;
}

严格来说，当我运行它时，我猜没有什么错。它正在执行我要求的操作。

但是-我希望鼠标悬停覆盖整个行，但只覆盖前两个单元格，最后一个单元格（在javascript中分配了背景颜色）仍保持绿色。我希望整行都是红色的。

这可能吗？如何？