悬停 table 多个颜色行

Question

我有一个 .hover table class 我想修改，使每一行悬停的颜色不同。我必须创建一个 class，因为我将它应用于整个 wordpress 站点的不同 tables，而不是全局应用于 tr、td、tbody。

Table 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>

Answer 1

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

.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>

悬停 table 多个颜色行

Hover table with multiple color rows

css

hover