Javascript 将鼠标悬停在html表上时触发事件

我所拥有的：

• 一个html表格，可以通过单击两个按钮动态放大：添加行和列
• 两个一行一列的表格。一个在桌子上方，一个在桌子左侧。这两个表与主表同时展开。当我添加新行时，左表显示新单元格。当我添加新列时，顶部表格显示新单元格
• 上面提到的两个表是隐藏的

我需要的是：

• 当我将鼠标悬停在主表中的特定单元格上时，它（悬停）应该会触发上表和左侧表中相关单元格的出现。例如，若我将鼠标悬停在第2行第2列（主表）的单元格上，它应该在顶部表格中显示单元格2，在左侧表格中显示单元格2
• 所以我需要以某种方式将所选单元格与其他表中的相同单元格连接起来，并在悬停状态下显示它们
• 我需要能够移动出现的单元格上的指针来单击它（当我将光标从主表移动到此单元格时，它不应该消失）

我需要的更难的版本假设，如果主表中只剩下一行或一列，隐藏的单元格将不会出现

它将如下所示：

由于CSS只允许在悬停状态下选择位于一个div内或同级的元素，因此我假设这只能通过JQuery完成

我使用此代码在主表上方悬停时显示整个隐藏表：

$('#my-table').hover(function() {  
  $('#dell-row').removeClass('hoverstate');
}, function() {
  $('#dell-row').addClass('hoverstate');
});

现在，我认为我需要将#我的表替换为#我的表中单元格的选择器，将#戴尔行替换为#戴尔行表中相应单元格的选择器。你知道我该怎么做吗

我无法指示单元格的静态坐标，因为表格正在动态更改

---

请看一看工作演示，其中包含所有html、css和JS代码。

此线程部分回答了此问题：此线程部分回答了此问题：