Question

这是我的代码。我在桌面上悬停第一个tr前一个类的背景颜色在第一个tr中的前两个td不会改变。但是只有当我首先转到tr时必须改变第一个两个td背景颜色会改变，我错过了一些代码。这可能只在css

＆＃13;

.cls{
background-color:red;
}
[data-class*="weeks"]:hover{
background-color:blue;
}

＆＃13;

<table border="1px">
  <thead>
    <tr>
      <th>row1</th><th>row2</th><th>row3</th><th>row4</th><th>row5</th>
    </tr>
  </thead>
  <tbody>
    <tr data-class="weeks">
      <td class="cls">1</td><td class="cls">2</td><td>3</td><td>4</td><td>5</td>
    </tr>
    <tr data-class="weeks">
      <td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 1

使用像这样

.cls{
background-color:red;
}
[data-class*="weeks"]:hover td{
background-color:blue;
}

<table border="1px">
  <thead>
    <tr>
      <th>row1</th><th>row2</th><th>row3</th><th>row4</th><th>row5</th>
    </tr>
  </thead>
  <tbody>
    <tr data-class="weeks">
      <td class="cls">1</td><td class="cls">2</td><td>3</td><td>4</td><td>5</td>
    </tr>
    <tr data-class="weeks">
      <td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
    </tr>
  </tbody>
</table>

Answer 2

问题是您已为<td>块中的.cls标记指定了背景颜色。当您在悬停时更改<tr>的背景颜色时<td> s不会丢失自己的样式，并且它们将始终位于<tr>的“顶部”背景，可以这么说。要解决此问题，请专门选择正在悬停的<td>的{{1}}个孩子，例如：

<tr>

.cls{
  background-color:red;
}
[data-class*="weeks"]:hover td {
  background-color:blue;
}

Answer 3

尝试更改样式：

.cls {
    background-color:red;
}
[data-class*="weeks"]:hover .cls, [data-class*="weeks"]:hover {
    background-color:blue;
}

当我将鼠标悬停在

3 个答案: