如何仅使用CSS实现鼠标悬停表格第一列时高亮整行

实现结论 #

可以仅通过CSS实现「仅悬停第一列时高亮整行」的需求，不需要引入JavaScript。

实现逻辑 #

原有逻辑是只要悬停行内任意位置就触发整行高亮，我们可以把触发条件限定为第一列被悬停，再通过CSS兄弟选择器覆盖同行其余单元格的背景样式即可。

最终实现代码 #

<style>
    /* 悬停第一列时，第一列自身高亮 */
    table tr td:first-child:hover {
        background-color: #8888FF;
    }
    /* 悬停第一列时，同行其余所有单元格同步高亮 */
    table tr td:first-child:hover ~ td {
        background-color: #8888FF;
    }
</style>

<table>
    <tr>
        <td>header</td>
        <td>12 </td>
        <td>13 </td>
        <td>14 </td>
    </tr>
    <tr>
        <td>header</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
    </tr>
    <tr>
        <td>header</td>
        <td>32</td>
        <td>33</td>
        <td>34</td>
    </tr>
    <tr>
        <td>header</td>
        <td>42</td>
        <td>43</td>
        <td>44</td>
    </tr>
</table>

样式说明 #

• td:first-child 伪类用于匹配每行的第一个单元格，也就是我们需要作为触发点的第一列
• ~ 是通用兄弟选择器，会匹配当前元素之后所有同级、同属一个父元素的元素，这里就是选中第一列之后该行剩下的所有单元格
• 该写法兼容性覆盖所有主流现代浏览器，最低可兼容到IE7版本，适用范围广。

内容的提问来源于stack exchange，提问作者AndrejK