Question

当用户将鼠标悬停在表格中的单元格上时，我希望将css样式类应用于该列，只有在它被悬停时才会使用。

以下是使用JS的示例：http://jsfiddle.net/JokerMartini/gprkL006/

以下是我用来对列进行排序的代码。我想结合这两个脚本。然而，第二个脚本很复杂，因为它是用原始Javasvcscript编写的。我想修改这个脚本以使用jQuery，这反过来会使我更简单，更容易组合两个小提琴。

https://jsfiddle.net/JokerMartini/ctq3w7sj/

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Times</th>
            <th>Count</th>
            <th>Size</th>
            <th>Info</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Mike</td>
            <td>15</td>
            <td>42314</td>
            <td>29</td>
            <td>stuff</td>
        </tr>

        <tr>
            <td>Great</td>
            <td>10</td>
            <td>7558</td>
            <td>43</td>
            <td>info</td>
        </tr>

        <tr>
            <td>Mitch</td>
            <td>20</td>
            <td>7841</td>
            <td>129</td>
            <td>stuff</td>
        </tr>

        <tr>
            <td>Leslie</td>
            <td>25</td>
            <td>16558</td>
            <td>423</td>
            <td>info</td>
        </tr>
    </tbody>
</table>

Answer 1

您可以使用CSS来突出显示悬停单元格的列，但是使用此解决方案，您的td和th必须具有位置：relative。

代码：

td:hover::after, thead th:not(:empty):hover::after {
    content:'';
    height: 10000px;
    left: 0;
    position: absolute;
    top: -5000px;
    width: 100%;
    z-index: -1;
}
td:hover::after, th:hover::after {
    background-color: #ffa;
}

演示：https://jsfiddle.net/2frgcea9/

使用jQuery我希望在TD悬停时突出显示表中的列

1 个答案: