Change css table row on hover

Question

I need to highlight a table row and change opacity of one cell. It would be nice to get a background color when hovering over a row and also change the opacity of the last to 1

That's how I changed the opacity of the last column. This only changes the opacity when hovering exactly of the last values but it would be nice if the last values also change to 1 when hovering somewhere on the whole row

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

I have put together a small example.

In this example i gave a background color for every <tr> tag on hover and while you hover on a <tr> the <small> tag will get opacity: 1 .

Hope this helps =]

 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

Just modify your code as follows:

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