将鼠标悬停在一行上并影响其他表的同一“n”行答案

【问题标题】：Hover over a row and affect the same "n" row of other tables将鼠标悬停在一行上并影响其他表的同一“n”行
【发布时间】：2021-03-27 15:24:10
【问题描述】：

我想将鼠标悬停在一行上并将悬停样式应用于其他表的同一“n”行。我可以用纯 CSS 做到这一点，而不使用 javascript 或 jquery 吗？所有表的行数都相同

我附上一张画图，以便您更好地理解问题。

如果不能，替代解决方案是使用 ngclass 和 javascript

<table class="maintable">
<tr>
    <td>
        <table class="childtable1">
            <tr>
                <td> Row 1 of childtable1</td>
            </tr>
            <tr>
                <td> Row 2 of childtable1</td>
            </tr>
            <tr>
                <td> Row 3 of childtable1</td>
            </tr>
        </table>
    </td>
    <td>
        <table class="childtable2">
            <tr>
                <td> Row 1 of childtable2</td>
            </tr>
            <tr>
                <td> Row 2 of childtable2</td>
            </tr>
            <tr>
                <td> Row 3 of childtable2</td>
            </tr>
        </table>
    </td>
    <td>
        <table class="childtable3">
            <tr>
                <td> Row 1 of childtable3</td>
            </tr>
            <tr>
                <td> Row 2 of childtable3</td>
            </tr>
            <tr>
                <td> Row 3 of childtable3</td>
            </tr>
        </table>
    </td>
</tr>

【问题讨论】：

你能分享你的HTML吗？
我更新了一个简单的代码示例。

标签： css css-tables

【解决方案1】：

不，这对于纯 css 是不可能的。

在css on hover你可以实现

悬停元素的内部元素
悬停元素的后续兄弟元素

在你的情况下你需要实现

父母表
（这在纯 css 中是不可能的）
比父母表的父母td
（这在纯 css 中是不可能的）
然后您可以从那里选择以下兄弟姐妹和孩子
（从那里确实可以）

兄弟选择器说明
https://www.w3schools.com/css/css_combinators.asp

展望未来...*

根据该规则：如果您只使用 div（只是兄弟姐妹）更改您的 html 结构并使用类（即tbl1_row1、tbl2_row1、...）来设置它们的样式，那将是可能的。

由于您只使用只有一列的表格......也许这对您来说是一个解决方案？

更新 1：我一直在禁食。这个想法只有在您将 div-table-row 悬停在第一个 div-table 中并突出显示下表中的相应行时才有效……当然。您不能将 div-table-row 悬停在第二个或第三个 div-table 中并实现第一个 div-table。当然，与之前解释的游戏相同。所以答案确实：不可能，到目前为止还不知道从这里开始可能的 html 结构:-(

更新 2
添加了描述同级选择器如何工作的链接。

【讨论】：

【解决方案2】：

在一般情况下，您需要使用 Javascript 来影响另一个表格中单元格的背景。 CSS 没有办法让你再次回到父级。

当用户将鼠标悬停在 3 个表之一中的 td 上时，maintable 会添加一个类 tdn，其中 n 为 0-2（在这种情况下，它可以是行中任意数量的 td）。这会导致相关 tds 的背景颜色发生变化，无论它们属于哪个内部表。

  const tables = document.querySelectorAll('table table');
  const mainTable = document.querySelector('.maintable');
  for (let i = 0; i < tables.length; i++) {
    let tds = tables[i].querySelectorAll('tr td');
    for (let j = 0; j < tds.length; j++) {
      let td = tds[j];
      td.addEventListener('mouseover', function () {
      mainTable.classList = 'maintable td' + j;
      });
    }
  }

table.maintable.td0 tr td table tr:nth-child(1) td, table.maintable.td1 tr td table tr:nth-child(2) td, table.maintable.td2 tr td table tr:nth-child(3) td {
  background-color: yellow;
}

<table class="maintable">
  <tr>
    <td>
        <table class="childtable1">
            <tr>
                <td> Row 1 of childtable1</td>
            </tr>
            <tr>
                <td> Row 2 of childtable1</td>
            </tr>
            <tr>
                <td> Row 3 of childtable1</td>
            </tr>
        </table>
    </td>
    <td>
        <table class="childtable2">
            <tr>
                <td> Row 1 of childtable2</td>
            </tr>
            <tr>
                <td> Row 2 of childtable2</td>
            </tr>
            <tr>
                <td> Row 3 of childtable2</td>
            </tr>
        </table>
      </td>
      <td>
        <table class="childtable3">
            <tr>
                <td> Row 1 of childtable3</td>
            </tr>
            <tr>
                <td> Row 2 of childtable3</td>
            </tr>
            <tr>
                <td> Row 3 of childtable3</td>
            </tr>
        </table>
        </td>
  </tr>
</table>

在问题中显示的非常具体的情况下，众所周知，行处于相同的垂直水平，您可以纯粹在 CSS 中实现类似于所需效果的东西 - 但由于它不是一个通用的解决方案，所以在这里给出更多的是一种乐趣。

这个想法在 3 个内部表中的每个 td 上使用了一个伪元素。这些被赋予绝对位置，第一个祖先返回的位置是主表。因此，可以创建一个跨越整个宽度的伪元素，覆盖 3 个内表。这些内表由白色边框分隔。

<head>
<style>

* {
  padding: 0;
  margin: 0;
}

.maintable {
width: auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
table {
  border: none;
}
table table {
  border-style:solid;
  border-width: 2em;
  border-color: white;
  display: inline-block;
  float: left;
  padding: 0;
  margin: -2px;
  border-collapse: collapse;
}

table.maintable tr td table tr td {
  padding: 20px;
  border: solid;
}

table.maintable tr td table tr td:hover:before {
  content: '';
  transform: translateY(-1em);
  height: 3.5em;
  background-color: yellow;
  display: inline-block;
  position: absolute;
  left: 2em;
  right: 2em;
  z-index: -1;
}

</style>
</head>
<body>
<table class="maintable">
<tr>
    <td style="padding: 0; margin: 0;">
        <table class="childtable1">
            <tr>
                <td> Row 1 of childtable1</td>
            </tr>
            <tr>
                <td> Row 2 of childtable1</td>
            </tr>
            <tr>
                <td> Row 3 of childtable1</td>
            </tr>
        </table>
    </td>
    <td style="padding: 0; margin: 0;">
        <table class="childtable2">
            <tr>
                <td> Row 1 of childtable2</td>
            </tr>
            <tr>
                <td> Row 2 of childtable2</td>
            </tr>
            <tr>
                <td> Row 3 of childtable2</td>
            </tr>
        </table>
      </td>
      <td style="padding: 0; margin: 0;">
        <table class="childtable3">
            <tr>
                <td> Row 1 of childtable3</td>
            </tr>
            <tr>
                <td> Row 2 of childtable3</td>
            </tr>
            <tr>
                <td> Row 3 of childtable3</td>
            </tr>
        </table>
        </td>
  </tr>
</table>

【讨论】：