编辑：

Question

我有一个动态构建的表，最终得到以下代码（带有示例值）：

<table id="patientTable" class="display" cellspacing="0" width="100%">
    <thead id="TableHeader">
        <tr>
            <th>Value1</th>
            <th>Value2</th>
            <th>Value3</th>
        </tr>
    </thead>
    <tbody id="tableContent">
        <tr class="clickable row_0" onclick="selectPatient(10001);" id="10001" style="background: #FFF;">
            <td class="tableContent">Value1</td>
            <td class="tableContent">Value2</td>
            <td class="tableContent">Value3</td>
        </tr>
    </tbody>
</table>

我正在尝试使用以下CSS突出显示已经悬停的行：

.clickable :hover {
        background-color: #CCC;
    }

出于某种原因，这会改变＆＃34; <td>＆＃34;例如，element只会突出显示Value1，Value2或Value3，而不是整行。

我试过（无济于事）使用：

.clickable tr:hover {
    background-color: #CCC;
}
.clickable:hover {
    background-color: #CCC;
}
.tr:hover {
    background-color: #CCC;
}
.tr :hover {
    background-color: #CCC;
}

我发现这种不寻常的行为，因为它似乎对我所见过的每一个其他人都有用..

值得一提：该表是从一个复杂的系统构建的，它基本上执行一个AJAX请求，该请求执行PHP数据库查询，获取值，将它们抛出到JSON数组中，然后将它们传回到JS，将数组重新解析为JSON，循环并创建表，然后输出它。 JS会导致这个问题吗？

班级名称＆＃34; .clickable＆＃34;，＆＃34; row _＃＆＃34; （其中＃是一个数字）并且表行的ID需要保留，因为它们在将来的函数中使用，并为我提供了一种单独标识每一行的方法。

Answer 1

一种解决方案是在悬停在父td上时将悬停应用于子元素tr：

＆＃13;

.clickable:hover td {
  background-color: #CCC;
}

＆＃13;

<table id="patientTable" class="display" cellspacing="0" width="100%">
  <thead id="TableHeader">
    <tr>
      <th>Value1</th>
      <th>Value2</th>
      <th>Value3</th>
    </tr>
  </thead>
  <tbody id="tableContent">
    <tr class="clickable row_0" onclick="selectPatient(10001);" id="10001" style="background: #FFF;">
      <td class="tableContent">Value1</td>
      <td class="tableContent">Value2</td>
      <td class="tableContent">Value3</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 2

这有效（来自你的问题）：

.clickable:hover {
    background-color: #CCC;
}

但为什么当你盘旋时没有任何事情发生？

因为此规则被内联样式覆盖：style="background: #FFF;"

提示：永远不要写内联样式（除非你真的需要它）

如果您删除style="background: #FFF;"，一切都会好的。

工作示例：

.clickable {
    background-color: #FFF;
}

.clickable:hover {
    background-color: #CCC;
}

<table id="patientTable" class="display" cellspacing="0" width="100%">
    <thead id="TableHeader">
        <tr>
            <th>Value1</th>
            <th>Value2</th>
            <th>Value3</th>
        </tr>
    </thead>
    <tbody id="tableContent">
        <tr class="clickable row_0" onclick="selectPatient(10001);" id="10001">
            <td class="tableContent">Value1</td>
            <td class="tableContent">Value2</td>
            <td class="tableContent">Value3</td>
        </tr>
        <tr class="clickable row_1" onclick="selectPatient(10002);" id="10002">
            <td class="tableContent">Value1</td>
            <td class="tableContent">Value2</td>
            <td class="tableContent">Value3</td>
        </tr>
    </tbody>
</table>

编辑：

有关哪些CSS规则优先于其他CSS规则的详细信息，请参阅有关MDN的这篇文章：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 3

您无法对表格行进行着色。使用直接子选择器（＆gt;）来替换表格单元格（th和td）。

编辑：Apollo（下图）是正确的：当然你可以为表行着色，但是如果你想用悬停着色这行，你需要这个（就像之前给出的答案一样）：

tr:hover > td,
tr:hover > th {
    background-color:#ccc;
}

突出表行

3 个答案:

编辑：