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

Posted 2023-03-05

【中文标题】使用css悬停时td标签上的边框移动整个表格

【英文标题】：border on td tag on hover using css moves whole table

【发布时间】：2014-05-10 14:04:01

【问题描述】：

我在小提琴上测试这个：

<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 标签上创建一个类似弹出的效果，但是当您在列上下移动鼠标时，它会产生这种奇怪的波浪效果，我该如何删除它？

【参考方案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;

【讨论】：

除此之外无法与您联系，因此很抱歉发表评论，但如果可以，请join this chat room。

【参考方案2】：

Demo Fiddle

尝试做：

.changeme
    padding:2px;

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

之所以会出现“弹出”，是因为在悬停时添加了边框的宽度，从而抵消了其他表格单元格。为了解决这个问题，将单元格上的填充设置为与您希望应用的边框宽度相同，然后在悬停时删除。然后边框将无缝填充该空间，保持表格结构不变。