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

Question

让我们以示例表为例：

<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 仅在鼠标悬停第一列时突出显示完整行？像这样。

标签： htmlcss

Answer 1

编辑答案。试试这个！

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