时间戳

首页 > 解决方案 > 具有多个颜色行的悬停表

css - 具有多个颜色行的悬停表

问题描述

我有一个要修改的 .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>

标签： csshover

解决方案

如果我正确理解您的任务，那么可以使用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>

推荐阅读