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>

标签： htmlcss

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>