html - CSS Hover 1 Div 影响其他非子 Div

Question

这是一些模拟代码。基本上我无法控制表格元素，只能控制 td 内的 div。我需要能够将鼠标悬停在行中的任何 div 上，并且它们都悬停到相同的状态。这可以吗？

Fiddle

HTML 和 CSS:

.one {
  background-color: #0000FF;
  width: 200px;
  height: 30px;
}

.two {
  background-color: #ff0000;
  width: 200px;
  height: 30px;
}

.three {
  background-color: #00FF00;
  width: 200px;
  height: 30px;
}


/*.one:hover, .two:hover, .three:hover {
  background-color: #000;
}*/

.row1:hover {
  background-color: #000;
}

<table>
  <tr>
    <td>
      <div class="row1 one">
      </div>
    </td>
    <td>
      <div class="row1 two">
      </div>
    </td>
    <td>
      <div class="row1 three">
      </div>
    </td>
  </tr>
</table>

Answer 1

在 CSS 中 there is no parent selector yet 。因此，您不能直接执行此操作。

但是，您可以尝试在最近的共同祖先上使用 :hover:

tr:hover .row1 {
  background-color: #000;
}

.one {
  background-color: #0000FF;
  width: 200px;
  height: 30px;
}
.two {
  background-color: #ff0000;
  width: 200px;
  height: 30px;
}
.three {
  background-color: #00FF00;
  width: 200px;
  height: 30px;
}
tr:hover .row1 {
  background-color: #000;
}

<table>
  <tr>
    <td>
      <div class="row1 one"></div>
    </td>
    <td>
      <div class="row1 two"></div>
    </td>
    <td>
      <div class="row1 three"></div>
    </td>
  </tr>
</table>

请注意，这并不完全相同:如果您将鼠标悬停在两个单元格之间的边框，即使您没有将鼠标悬停在任何 .row1 上，它们也会改变颜色。