为什么悬停样式在以下代码中不起作用？

Question

我希望除标题行之外的表中的行的不透明度为0.6，当我将鼠标悬停在它上面时，我希望不透明度更改为1.但是，当我使用以下代码时，悬停样式不会工作。如果我将0.6不透明度应用于表的所有行和列，则悬停样式起作用。这是为什么？

tr td {
  opacity: 0.6;
}

tr:hover {
  opacity: 1;
}

Answer 1

选中此项，运行代码段：

tr {
  min-width:50px;
}
tr td {
  opacity: 0.2;
  min-width:inherit;
}

tr:hover td{
  opacity: 1;
}

<table column-width=40px>
  <tr bgcolor=green><td>A</td><td>F</td></tr>
  <tr bgcolor=red><td>B</td><td>G</td></tr>
  <tr bgcolor=violet><td>C</td><td>H</td></tr>
  <tr bgcolor=yellow><td>D</td><td>I</td></tr>
  <tr bgcolor=blue><td>E</td><td>J</td></tr>
</table>

我将hover属性与<tr>一起使用，并将效果传递给所有<td>使用：

tr:hover td{
  opacity: 1;
}

你忘记的只是一个小td！