懸停添加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邊界，而無需移動元素

回答

相關問題