Html CSS悬停1 Div影响其他非子Div

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

小提琴：

HTML:

在CSS中。因此，您不能直接这样做

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

：hover

：

tr:hover.row1{
背景色：#000；
}

.one{
背景色：#0000FF；
宽度：200px；
高度：30px；
}
.二{
背景色：#ff0000；
宽度：200px；
高度：30px；
}
.三{
背景色：#00FF00；
宽度：200px；
高度：30px；
}
tr：悬停。第1行{
背景色：#000；
}

---

我认为仅使用CSS是不可能的，因为您对上面的表或tr没有任何控制/访问权限。如果确实有一些访问权限（或者可以肯定地说div将被包装在tr中），请尝试以下代码：

（基本上，给祖父设定一条规则

tr

）

---

奇怪的想法：

您有一个无法控制的父级

tr

。请尝试制作一个

表

，并将其嵌套在

td

中。我假设您可以轻松控制此

表

上的任何操作。因此，请将选择器放在该表上，然后使用它

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

---

“悬停到相同的状态”是什么意思？所以悬停在任何一个div.1.2.3上都会悬停到第1行：悬停状态。希望这说明得更好。他的意思是所有3个堂兄div都变成相同的颜色是的。谢谢@kumar_

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

tr:hover > td > div {
  background-color: black;
}

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

.mytable:hover tr > td > .row1 {
  background-color: black;
}