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

Question

可能重复:
CSS悬停边框使内联元素稍微调整

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

.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;,因为此框模型包括填充和边框宽度到计算大小,例如:

.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

a添加border到正规的项目,相同color的background,所以它不能被看到.这样一来,该物品border: 1px是否有徘徊.