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

时间:2018-03-18 02:33:14

标签: css pseudo-class

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

tr td {
  opacity: 0.6;
}

tr:hover {
  opacity: 1;
}

1 个答案:

答案 0 :(得分: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