当身体悬停时改变头答案

【问题标题】：Change thead when tbody hover当身体悬停时改变头
【发布时间】：2014-09-28 10:22:31
【问题描述】：

我正在尝试制作一个表格，当鼠标悬停在该行上时，第一个 thead 行列将改变背景。我知道可以使用 jQuery 来完成，我只想知道我是否只能使用 CSS。

<table>
<thead><tr><th></th><th>Title 1</th><th>Title 2</th></tr></thead>
<tbody>
    <tr><th>List 1</th><td>Data 1</td><td>Data 2</td></tr>
    <tr><th>List 2</th><td>Data 1</td><td>Data 2</td></tr>
    <tr><th>List 3</th><td>Data 1</td><td>Data 2</td></tr>
</tbody>
</table>

<style>
table tbody tr:hover {background: yellow;}
table tbody tr:hover thead tr th {background: red;}
</style>

【问题讨论】：

希望 CSS 中存在父选择器。
Is there a CSS parent selector?的可能重复
Example 2 这是另一种可能的愚蠢方式。哈哈。

标签： css html-table

【解决方案1】：

不幸的是，我认为您无法单独使用 css 实现您所追求的目标。

基本上你需要一个parent's sibling selector 来完成这项工作，并且不存在这样的选择器。

虽然您可以将鼠标悬停在父元素上并影响子元素，但 CSS 尚不允许与子元素的交互影响父元素或父元素的兄弟元素。

所以……

#parent:hover #child { /* this works */
    background: green;
}
#child:hover #parent { /* this does not work */
    background: yellow;
}

Example

【讨论】：