html - 悬停时更改 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>