Javascript 在表格中悬停以影响标题

我不确定这是否可以在没有JavaScript的情况下实现，但这会更好

这就是我的页面的外观：

 ____________________________
| TITLE                      |     |This is a fixed header. I want "TITLE"
|----------------------------|     |to be the name of the row, and I want it
|   _______    _______    ___|     |to show when I hover over one of the 
|  |       |  |       |  |   |     |image rows.
|  |       |  |       |  |   |     |
|  |_______|  |_______|  |___|     | [The boxes are the images.]
|   _______    _______    ___|     |
|__|_______|__|_______|__|___|     |

标题{
背景：#FFFFFF；
位置：固定！重要；
宽度：100%；
高度：85px；
排名：0；
左：0；
文本对齐：左对齐；
字体大小：30px；
边框：1px纯黑；
}
身体{
填充顶部：100px；
/*等于收割台的高度*/
}
r1n{
宽度：200px；
高度：200px；
显示：内联；
}
r1n：悬停{
显示：无
}
表tr：悬停~收割台r1n{
显示：无
}

名称
A.
B
C
D
A.
B
C
D
A.
B
C
D
A.
B
C
D

我看到很多人说这是不可能的，尽管我永远不会建议你在实践中使用它

以下是一个例子：

正文{
保证金：0；
}
桌子{
利润率：18px0；
位置：相对位置；
边框：1px纯黑；
}
tr:n个孩子（偶数）{
背景：DDD；
}
tr:n个孩子（奇数）{
背景：#FFF；
}
tr：悬停{
背景：番茄；
}
tr[数据头]：悬停：在{
内容：attr（数据头）；
位置：绝对位置；
顶部：-19px；
左：-1px；
边框：1px纯黑；
边框底宽：0px；
宽度：100%；
}
运输署{
填充：5px15px；
}

A.
B
C
D
A.
B
C
D
A.
B
C
D
A.
B
C
D

我看到很多人说这是不可能的，尽管我永远不会建议你在实践中使用它

以下是一个例子：

正文{
保证金：0；
}
桌子{
利润率：18px0；
位置：相对位置；
边框：1px纯黑；
}
tr:n个孩子（偶数）{
背景：DDD；
}
tr:n个孩子（奇数）{
背景：#FFF；
}
tr：悬停{
背景：番茄；
}
tr[数据头]：悬停：在{
内容：attr（数据头）；
位置：绝对位置；
顶部：-19px；
左：-1px；
边框：1px纯黑；
边框底宽：0px；
宽度：100%；
}
运输署{
填充：5px15px；
}

A.
B
C
D
A.
B
C
D
A.
B
C
D
A.
B
C
D

就因为您在@AndrewBone的回复中要求js解决方案

注意使用

index

查找表中悬停的

tr

的当前位置。索引从0开始，因此您在那里看到的

+1

$（函数（）{
$（'#tbl1 tr'）。悬停（函数（）{
i=$（'tbl1 tr'）。指数（this）+1；
$（'r1n'）.text（'Row'+i）；
});
});
标题{
背景：#FFFFFF；
位置：固定！重要；
宽度：100%；
高度：85px；
排名：0；
左：0；
文本对齐：左对齐；
字体大小：30px；
边框：1px纯黑；
}
身体{
填充顶部：100px；
/*等于收割台的高度*/
}
r1n{
宽度：200px；
高度：200px；
显示：内联；
}
#tbl1{
边界塌陷：塌陷；
}
#tbl1 td{
填充物：5px；
}

名称
A.
B
C
D
A.
B
C
D
A.
B
C
D
A.
B
C
D
就因为您在@AndrewBone的回复中要求js解决方案

注意使用
index
查找表中悬停的
tr
的当前位置。索引从0开始，因此您在那里看到的
+1


$（函数（）{
$（'#tbl1 tr'）。悬停（函数（）{
i=$（'tbl1 tr'）。指数（this）+1；
$（'r1n'）.text（'Row'+i）；
});
});
标题{
背景：#FFFFFF；
位置：固定！重要；
宽度：100%；
高度：85px；
排名：0；
左：0；
文本对齐：左对齐；
字体大小：30px；
边框：1px纯黑；
}
身体{
填充顶部：100px；
/*等于收割台的高度*/
}
r1n{
宽度：200px；
高度：200px；
显示：内联；
}
#tbl1{
边界塌陷：塌陷；
}
#tbl1 td{
填充物：5px；
}

名称
A.
B
C
D
A.
B
C
D
A.
B
C
D
A.
B
C
D
我知道您有一些答案（并且是公认的答案），如果有人喜欢这样的东西，我只是想把一个有目标的JQ解决方案放在这里：）（我想我不会伤害另一个答案）

在此代码中，
表
和
标题
是同级，即使在发布的代码中，body是表的父级，并且是标题的同级。在这里，所有内容都自动插入到默认的
标记中


$（“表tr”）.hover（函数（）{
var data=$（this.attr（'data-target'），
target=$（this）.parents（'table'）.sibbines（'header'）.find（'h1'））
$（目标）。每个（函数（）{
if（$（this.attr（'id'）==数据）{
$（this.toggle（））
}
})
})
标题{
背景：#FFFFFF；
位置：固定！重要；
宽度：100%；
高度：85px；
排名：0；
左：0；
文本对齐：左对齐；
字体大小：30px；
边框：1px纯黑；
}
身体{
填充顶部：100px；
/*等于收割台的高度*/
}
收割台h1{
显示：无；
位置：绝对位置；
左：0；
排名：0；
保证金：0；
}
表tr{
光标：指针；
背景：蓝色；
}
表tr：第n个子项（奇数）{
背景：红色；
}
表，td{
边界塌陷：塌陷；
填充：20px；
}

标题行1
标题行2
标题行3
标题行4
A.
B
C
D
A.
B
C
D
A.
B
C
D
A.
B
C
D
我知道您有一些答案（并且是公认的答案），如果有人喜欢这样的东西，我只是想把一个有目标的JQ解决方案放在这里：）（我想我不会伤害另一个答案）

在此代码中，
表
和
标题
是同级，即使在您发布的代码中，body是表a的父级