Question

我正在尝试创建一个表格，当鼠标悬停在该行上时，第一个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>

Answer 1

不幸的是，我不认为你可以用css独自完成你的目标。

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

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

所以......

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

<强> Example

当tbody悬停时改变thead

1 个答案: