使用css悬停在td标签上的边框移动整个表

Question

我正在测试这个小提琴:

<table>
    <tr>
        <td class="changeme">something</td>
        <td>something</td>
        <td>something</td>
        <td>something</td>
        <td>something</td>
    </tr>
    <tr>
        <td class="changeme">something</td>
        <td>something</td>
        <td>something</td>
        <td>something</td>
        <td>something</td>
    </tr>
    <tr>
        <td class="changeme">something</td>
        <td>something</td>
        <td>something</td>
        <td>something</td>
        <td>something</td>
    </tr>
    <tr>
        <td class="changeme">something</td>
        <td>something</td>
        <td>something</td>
        <td>something</td>
        <td>something</td>
    </tr>
</table>

这个css:

.changeme:hover {
    border:outset;
    cursor:pointer;
}

我只是想在td标签上创建一个类似弹出的效果,但是当你在列上上下运行鼠标时它有这种奇怪的波浪效果,我怎么能删除它？

Answer 1

您也可以使用outline而不是border属性,这在这种特定情况下更适合

.changeme:hover {
    outline:2px solid #f00;
    padding:2px;
    cursor:pointer;
}

Demo

为什么使用border偏移的原因？如果您了解CSS Box模型,border则会在元素外部计算而不是在内部,因此它会在悬停时抖动您的元素.

有多种方法可以解决这个问题,也可以使用transparent边框颜色来保留边框空间

Demo

.changeme{
    padding:2px;
    border: 2px solid transparent;
}
.changeme:hover {
    border:2px solid #f00;
    padding:2px;
    cursor:pointer;
}