如何使CSS樣式覆蓋JavaScript應用的樣式

Question

我動態創建一個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中分配，它保持綠色。 我希望整行變紅。

這可能嗎？ 如何？

Answer 1

問題是，你只是用CSS定位<tr>但是GREEN背景在<td> 。

將其添加到您的CSS中

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

演示

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

 <div id="CrewMemberPanel"> <table id="CrewMemberTable"> <tr> <td>this text</td> <td>some text</td> <td style="background-color: GREEN">more text</td> </tr> </table> </div> 

Answer 2

您將需要一個具有更高特異性的選擇器，例如

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

除了行之外，您還特別希望定位單元格。 （如果您希望可以向單元格添加類或ID以促進更高特異性的定位。）

使用您在問題中提供的代碼結構，請參閱下面的代碼段以獲取工作示例：

 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"; CrewCell = CrewRow.insertCell(-1); CrewCell.innerHTML = "more text"; CrewCell.style.backgroundColor = "GREEN"; 

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

 <div id="CrewMemberPanel"></div>