懸停時更改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;
}