如何使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中分配了背景颜色的最后一个单元格仍然是绿色的。我希望整行都是红色的。

这有可能吗？怎么做？

- KWallace

---

如果您可以访问CSS和JavaScript，为什么不在CSS中定义一个类来处理相关的<td>，然后使用JavaScript添加该类，而不是样式呢？ - David Thomas

Answer 1

你需要一个具有更高特定性的选择器，例如

#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>

- kenS

---

完美。还有一个几乎相同的答案，建议让悬停单元格的背景变透明，从而显示悬停颜色。我认为我更喜欢你的答案，因为它不涉及“技巧”。它只是设置颜色，而不是做一些事情来显示颜色。 - KWallace

Answer 2

问题在于，您只使用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>

- Phil