Question

是否有办法使用CSS3或javascript突出显示包含2个元素的表格行，其中每个表格元素在悬停在该行上时突出显示不同的背景颜色？

因此，例如，您有一个包含两个值的表行，如

1.45 | 2.56

并且包含1.45的表格元素将具有蓝色背景，包含2.56的元素将为红色。

目前我已经拥有它所以它会改变整行的背景颜色，如下所示：

.graph-table tbody > tr:hover {
    background-color: #6ab1b0;
}

Answer 1

使用:nth-child选择器，如下所示：

＆＃13;

td {
  padding: 15px;
}
tr:hover td {
  background-color: red;
  color: white;
  cursor:pointer;
}
tr:hover td:nth-child(1) {
  background-color: blue;
}

＆＃13;

<table>
  <tr>
    <td>2.00</td>
    <td>3.45</td>
  </tr>
</table>

＆＃13;

Answer 2

你可以这样使用:nth-of-type()：

tr td:nth-of-type(1):hover{
   background: red; 
}

tr td:nth-of-type(2):hover{
   background: blue;
}

EXAMPLE 1

通过将td定位为tr的后代，您可以确保它适用于多行：

EXAMPLE 2

Answer 3

：nth-child（偶数）{background-color：＃ffd800;} 要么：第n个孩子（奇数）

根据列的不同，突出显示不同颜色的表格行

3 个答案: