问题描述
我想将鼠标悬停在一行上并将悬停样式应用到其他表格的同一“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>
解决方法
不，这在纯 css 中是不可能的。
在 css 上悬停可以实现
- 悬停元素的内部元素
- 跟随悬停元素的兄弟元素
在你的情况下你需要实现
- 父母表
（这在纯 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
添加了一个链接，描述了兄弟选择器的工作原理。
在一般情况下，您需要使用 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>