Question

可能重复：
CSS hover border makes inline elements adjust slightly

我有一行我正在悬停时应用背景突出显示。

.jobs .item:hover {
    background: #e1e1e1;
    border-top: 1px solid #d0d0d0;
}

然而，当边框向元素添加1px 附加时，它会使其“移动”。我如何在这里补偿上述动作（不使用背景图像）？

Answer 1

您可以使边框透明。它以这种方式存在，但是不可见，因此它不会推动任何事物：

.jobs .item {
    background: #eee;
    border-top: 1px solid transparent;
}

.jobs .item:hover {
    background: #e1e1e1;
    border-top: 1px solid #d0d0d0;
}

如果您的元素具有指定的height和/或width，您还可以使用box-sizing:border-box;，因为此框模型包含填充和边框宽度到计算大小，例如：< / p>

.jobs .item {
    background: #eee;
    height: 40px;
    box-sizing: border-box;
}

.jobs .item:hover {
    background: #e1e1e1;
    border-top: 1px solid #d0d0d0;
}

Answer 2

添加margin:-1px;，将1px减少到每一方。或者如果你只需要一方，你可以margin-left:-1px等。

Answer 3

试试这可能会解决您的问题。

的CSS：

.item{padding-top:1px;}

.jobs .item:hover {
    background: #e1e1e1;
    border-top: 1px solid #d0d0d0;
    padding-top:0;
}

HTML：

<div class="jobs">
    <div class="item">
        content goes here
    </div>
</div>

请参阅小提琴输出：http://jsfiddle.net/dLDNA/

Answer 4

将border添加到常规项目，与color相同background，以便无法看到。这样，该项目有border: 1px，无论是否正在徘徊。

在悬停时添加CSS边框而不移动元素

4 个答案: