带有表格行跨度的 CSS 鼠标悬停突出显示答案

【问题标题】：css mouseover highlight with table rowspan带有表格行跨度的 CSS 鼠标悬停突出显示
【发布时间】：2016-03-29 16:29:30
【问题描述】：

我有一个使用 PHP 从数据库中生成的简单 HTML 表格，在某些情况下，一个单元格跨越多行。举个简单的例子：

<table>
  <tr class ="highlightRow">
    <td>Cell 1</td>
    <td rowspan="2">Cell over more rows</td>
  </tr>
  <tr class ="highlightRow">
    <td>Cell 2</td>
  </tr>
</table>

我用一个简单的 CSS 规则突出显示鼠标所在的行：

.highlightRow {
    background-color:       #FFF;
}
.highlightRow:hover {
    background-color:       #EEE;
}

当鼠标悬停在“单元格 2”上时，我找不到任何解决方案（仅 CSS）来突出显示“更多行上的单元格”。

【问题讨论】：

标签： html css html-table

【解决方案1】：

我在我的项目中遇到了同样的问题。我们做不到。这就是为什么大多数开发人员都喜欢 jquery DOM 遍历方法(parent(),child(),sibling(),next(),prev(), After()等..,)

参考：Is there a CSS parent selector?

结论是：CSS中没有选择父级的选项。我们可以借助javascript帮助。

**我们喜欢编码..*

【讨论】：

【解决方案2】：

我不知道这是否能满足您的需求，但看看我的解决方案

.highlightRow {
    background-color:       #FFF;
}

.highlightRow:hover{
    background-color:       #EEE;
}


table:hover .include{
    background-color:       #EEE;
}

<table>
  <tr class ="highlightRow">
    <td>Cell 1</td>
    <td rowspan="2" class="include">Cell over more rows</td>
  </tr>
  <tr class ="highlightRow">
    <td>Cell 2</td>
  </tr>
</table>

技巧是每次悬停表格时突出显示.include 单元格，并添加一些规则以在每次悬停时突出显示tr。

【讨论】：

如果我们将鼠标悬停在更多行上意味着相同的本身也改变了bg颜色..这是不正确的要求。
这是一个合适的解决方案，以防在每种情况下都应突出显示“单元格越过更多行”。在我的情况下，只有在选择相邻行之一时，才应突出显示“更多行上的单元格”，考虑到表格在这两行之后继续。