悬停时更改css表行

Question

我需要突出显示表格行并更改一个单元格的不透明度。 将鼠标悬停在一行上时获得背景颜色并将最后一个的不透明度更改为 1 会很好

这就是我如何更改最后一列的不透明度。 这只会在准确悬停最后一个值时更改不透明度，但如果在悬停整行的某个位置时最后一个值也更改为 1，那就太好了

div#r_db_tab_2 table.r_db_tab tbody tr td small { opacity: 0.2; }
div#r_db_tab_2 table.r_db_tab tbody tr td small:hover { opacity: 1; }

HTML：

 <div id="r_db_tab_2"> <table class="r_db_tab"> <thead> <tr> <th>Date</th> <th>Bat</th> <th>Dur</th> <th><small>CSQ</small></th> </tr> </thead> <tbody> <tr> <th>15.12.2019 - 19:37:52</th> <td>5.82V</td> <td>0s</td> <td><small>23.99</small></td> </tr> <tr> <th>15.12.2019 - 19:33:09</th> <td>8.52V</td> <td>0s</td> <td><small>0</small></td> </tr> <tr> <th>15.12.2019 - 19:19:52</th> <td>8.55V</td> <td>0s</td> <td><small>0</small></td> </tr> <tr> <th>15.12.2019 - 19:04:07</th> <td>4.38V</td> <td>0s</td> <td><small>22.99</small></td> </tr> </tbody> </table> </div>

Answer 1

我整理了一个小例子。

在此示例中，我为悬停时的每个<tr>标签提供了背景颜色，当您将鼠标悬停在<tr> ， <small>标签将获得opacity: 1 。

希望这有帮助 =]

 table tr:hover { background-color: #ddd; } table tr td small { opacity: 0.2; } table tr:hover td small { opacity: 1; }

 <table> <tr> <td>data</td> <td>in</td> <td>first</td> <td><small>row</small></td> </tr> <tr> <td>data</td> <td>in</td> <td>second</td> <td><small>row</small></td> </tr> <tr> <td>data</td> <td>in</td> <td>third</td> <td><small>row</small></td> </tr> <tr> <td>data</td> <td>in</td> <td>fourth</td> <td><small>row</small></td> </tr> </table>

Answer 2

只需按如下方式修改您的代码：

div#r_db_tab_2 table.r_db_tab tbody tr:hover td small {
   opacity: 1;
}