我希望除标题行之外的表中的行的不透明度为0.6,当我将鼠标悬停在它上面时,我希望不透明度更改为1.但是,当我使用以下代码时,悬停样式不会工作。如果我将0.6不透明度应用于表的所有行和列,则悬停样式起作用。这是为什么?
tr td {
opacity: 0.6;
}
tr:hover {
opacity: 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
!