Question

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

小提琴：https://jsfiddle.net/sthompson/0nzszu10/

HTML：

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

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

Answer 1

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

我不认为只使用CSS，因为你对表格或上面的tr 没有控制/访问权限。如果你做有一些访问权限（或者可以确定div将包含在 tr 中，请尝试以下代码：

（基本上，将规则放在祖父tr）

上

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

https://jsfiddle.net/zbqzu21r/

奇怪的想法：

您拥有无法控制的父tr。尝试制作table并将其嵌套在td内。我假设您可以轻松控制在此table上完成的任何操作。所以，把你的选择器放在这张桌子上，并完成它。

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

CSS：

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

CSS Hover 1 Div会影响其他非子女

2 个答案: