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

Question

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

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 !

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

Why is Hovering style not working in the below code?

css

pseudo-class