hover时添加CSS边框而不移动元素

可能重复：
CSShover边界使内联元素略微调整

我有一行，我正在应用背景突出显示hover。

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

但是，由于边框为元素增加了1px，因此会使其“移动”。 如何补偿上述移动（不使用背景图像）？

Answer 1

您可以使边框存在，但与背景具有相同的颜色（如果您不需要支持较旧版本的IE（<7），则为transparent ）。

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

Answer 2

添加margin:-1px; 从而将每边减less1px 。 或者如果你只需要侧面你可以做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 ，与background color相同，以免看到。 这样的项目有一个border: 1px是否被徘徊。