悬停添加CSS边界，而无需移动元素

可能重复：
CSS hover border makes inline elements adjust slightly 悬停添加CSS边界，而无需移动元素

我有我悬停应用背景亮点一行。

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

然而，随着边境增加了1px的额外的元素，它使得“移动”。我将如何补偿上述移动（不使用背景图像）？

来源

2012-03-08 David542

贵元素有一个定义的高度？如果是这样，你可以1）使用'box-sizing：border-box'（具有必要的前缀）用于现代浏览器，或者2）通过添加与默认背景相同颜色的边界并作弊来欺骗并且刮掉距指定高度1个像素。 – BoltClock 2012-03-08 04:12:35

看到我的答案在下面，让我知道如果在这里滞后，所以我可以更明确地理解你的问题。 – w3uiguru 2012-03-08 04:22:02

188

您可以使边框透明。这样一来它的存在，但是是看不见的，所以它不围绕任何推：

.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; 
}

来源

2012-03-08 04:12:32 Duopixel

任何人都看到了通过使用CSS属性'box-sizing：border-box;'解决这个问题的方法？ – tim 2013-02-26 00:22:15

@tim是的，它可以与'box-sizing：border-box;'一起使用。 – Duopixel 2013-02-26 12:46:44

简单而有效。谢谢！有时候，明显的答案是不明显的，直到它击中你的脸。 – SeanKendle 2014-02-18 16:34:09

在常规项目中添加border，与background一样color，以便无法看到。这种方式该项目有一个border: 1px无论是否被徘徊。

来源

2012-03-08 04:11:50 danapaige

添加margin:-1px;这降低1px到每一侧上。或者如果你只需要一边你可以做margin-left:-1px等

来源

2012-03-08 04:12:51 Dips

这对我来说是最好的解决方案，因为在我的情况下，我为orignal元素设置了1px边框，并希望在悬停时获得更厚的边框（3px）。使用'margin：-2px;'确实有效。 – 2014-08-12 11:58:40

事实上，当边界厚度从一种状态变为另一种状态时，这是最好的解决方案。 – 2014-11-21 11:03:42

节省了我的时间:)谢谢 – medBo 2017-03-21 18:54:53

试试这个可能会解决你的问题。

的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/

来源

2012-03-08 04:19:04 w3uiguru

这里是新的：http://jsfiddle.net/fbfjw/3/embedded/result/ – Jack 2013-06-07 12:03:16

http://s21.postimg.org/q8n11ng6v/test_2.png – Jack 2013-06-07 12:25:42

悬停添加CSS边界，而无需移动元素

回答

相关问题