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

Question

我有什么：

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

我需要什么：

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

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

看起来像这样：

Picture of the task

由于CSS允许选择仅悬停一个div内部或兄弟姐妹的元素，我认为这只能用JQuery完成。

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

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

现在我认为我需要将#my-table替换为＃my-table table和#dell-row中单元格的选择器，并使用＃dell-row table中相应单元格的选择器。我有什么想法可以做到这一点吗？

我无法指示单元格的静态坐标，因为表格是动态变化的。

请使用所有html，css和JS代码here查看工作演示。