具有多个颜色行的悬停表[重复]

Posted 2023-03-05

【中文标题】具有多个颜色行的悬停表[重复]

【英文标题】：Hover table with multiple color rows [duplicate]

【发布时间】：2021-03-17 10:15:19

【问题描述】：

我有一个要修改的 .hover 表类，因此每行悬停都是不同的颜色。我必须创建一个类，因为我将它应用于 wordpress 网站上的不同表，而不是全局到 tr、td、tbody。

为了清楚起见，表格 html 被删除了。

 .hover tbody tr:hover background-color: #ebebeb;

<table class="hover">
      <thead>
        <tr>
          <th><br>
          </th>
          <th>V</th>
          <th>W</th>
          <th>X</th>
          <th>Y</th>
          <th>Z</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>A</td>
          <td>40</td>
          <td>60</td>
          <td>90</td>
          <td>120</td>
          <td>130</td>
        </tr>
        <tr>
          <td>B</td>
          <td>345</td>
          <td>490</td>
          <td>540</td>
          <td>540</td>
          <td>580</td>
        </tr>
        <tr>
          <td>C</td>
          <td>70</td>
          <td>71</td>
          <td>71</td>
          <td>72</td>
          <td>71.5</td>
        </tr>
        <tr>
          <td>D</td>
          <td>4</td>
          <td>9</td>
          <td>10</td>
          <td>13</td>
          <td>16</td>
        </tr>
      </tbody>
    </table>

【参考方案1】：

如果我正确理解了您的任务，那么可以对每一行使用 nth-child() 伪类来完成，如下所示：

.hover tbody tr:nth-child(1):hover background-color: #ebebeb;

你需要这样的结果吗？

.hover tbody tr:nth-child(1):hover background-color: #ebebeb;
.hover tbody tr:nth-child(2):hover background-color: red;
.hover tbody tr:nth-child(3):hover background-color: green;
.hover tbody tr:nth-child(4):hover background-color: blue;

<table class="hover">
      <thead>
        <tr>
          <th><br>
          </th>
          <th>V</th>
          <th>W</th>
          <th>X</th>
          <th>Y</th>
          <th>Z</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>A</td>
          <td>40</td>
          <td>60</td>
          <td>90</td>
          <td>120</td>
          <td>130</td>
        </tr>
        <tr>
          <td>B</td>
          <td>345</td>
          <td>490</td>
          <td>540</td>
          <td>540</td>
          <td>580</td>
        </tr>
        <tr>
          <td>C</td>
          <td>70</td>
          <td>71</td>
          <td>71</td>
          <td>72</td>
          <td>71.5</td>
        </tr>
        <tr>
          <td>D</td>
          <td>4</td>
          <td>9</td>
          <td>10</td>
          <td>13</td>
          <td>16</td>
        </tr>
      </tbody>
    </table>

【讨论】：

就是这样，完美。谢谢。

总是乐于提供帮助。