复杂的表与Rowspan悬停和斑马效果

Question

我试图为具有多行数的表格制作悬停效果，但我无法使其完全正常工作。

另一个stackoverflow中描述的css不起作用（请参阅此处的解决方案https://codepen.io/cimmanon/pen/KqoCs）。

此处的示例（多列上的rowspan）：https://codepen.io/anon/pen/rJXgzW

悬停css效果定义为：

tbody:hover td[rowspan], tr:hover td {
   background: red; 
}

有什么建议吗？

Answer 1

工作示例中的技巧是在表中使用多个<tbody>元素，其中每个表主体包含跨越多行的一个表单元格。那样

tbody:hover td[rowspan] { background: red; }

让它神奇地按照要求出现。这不会以相同的方式与第二个示例一起使用，因为有（1）多个行跨越元素和（2）它使用<th>元素（这很容易解决，虽然）。

为了让它仅使用CSS，你需要在表格单元格中嵌套表格。