使用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 Model，border会在元素之外而不是在内部计算，因此它会在悬停时抖动你的元素。

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

Demo

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

Answer 2

Demo Fiddle

尝试做：

.changeme{
    padding:2px;
}
.changeme:hover {
    border:2px outset;
    padding:0;
    cursor:pointer;
}

'pop'正在发生，因为边框的宽度是在悬停时添加的，抵消了其他表格单元格。要抵消这种情况，请在单元格上设置与要应用的边框宽度相同的填充，然后在悬停时删除。然后边界将无缝填充这个空间，保持桌面结构。