Question

我有一个使用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;
}

当鼠标悬停在“Cell 2”上时，我找不到任何解决方案（仅限CSS）来突出显示“Cell over more rows”。

Answer 1

我在我的项目中遇到了同样的问题。我们做不到。这就是为什么大多数开发人员都提出了jquery DOM遍历方法（parent（），child（），sibling（），next（），prev（），（）之后，等。，）

参考： Is there a CSS parent selector?

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

**我们喜欢编码.. *

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

每次表格悬停时都会突出显示.include单元格，并添加一些规则以在每次徘徊时突出显示tr。

css鼠标悬停突出显示表rowspan

2 个答案: