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>

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

2 个答案:

演示