Html 表格 - 鼠标悬停时突出显示特定列的行答案

【问题标题】：Html table - row highlight on mouse hover for specific columnHtml 表格 - 鼠标悬停时突出显示特定列的行
【发布时间】：2021-11-11 06:32:05
【问题描述】：

我们以表格为例：

<style>
    table tr: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>

在此示例中，鼠标悬停在任何列上都会突出显示整行。

是否可以仅在鼠标悬停时仅使用 css 突出显示第一列的完整行？喜欢this。

【问题讨论】：

你的意思是在第一列悬停时突出显示？
添加类...现在我工作正常，它突出显示所有...表 tr:hover td ...悬停。然后你会得到表 tr.my_class td:hover{}
@YevheniiShlapak 抱歉，问题有误。你是对的，我的意思是第一列悬停。

标签： html css

【解决方案1】：

将~ 选择器与:first-child 一起使用。像这样：

table tr td:first-child:hover ~ td {
    background-color: #8888FF;
}
  table tr td:first-child:hover {
    background-color: #8888FF;
}

附：也许这不是最好的方法，但我不知道其他方法。

【讨论】：

感谢您的反馈。几乎在那里，现在行在第一列鼠标悬停时突出显示。但并非所有单元格，该行的第一个单元格没有突出显示。是否可以同时突出显示第一个单元格？
@AndrejK 我已经编辑了一个答案。

【解决方案2】：

已编辑答案。试试这个！

<style>
    table tr td:first-child:hover ~ td, td:first-child:hover{
        background-color: #8888FF;
    }
</style>

【讨论】：

查看随附的屏幕截图并编辑您的答案。
感谢您的反馈。抱歉，我的问题有一个错字 - 有“行”而不是“列”。我改变了它。所以我需要在第一列悬停时突出显示整行。
@AndrejK 检查我编辑的答案。为我工作。
非常感谢，它就像一个魅力。不幸的是，我不能选择 2 个答案 :-(

【解决方案3】：

您可以使用此代码：

    table tr td:nth-child(1):hover{
                                    background-color: #8888FF;
                                  }

【讨论】：

【解决方案4】：

  td:first-child:hover ~ td, td:first-child:hover{
        background-color: #8888FF;
    }

我认为这就是你要找的东西

【讨论】：