按鈕懸停效果拉起段落

Question

我試圖爲Bootstrap 3中的默認按鈕創建一個奇特的按鈕懸停狀態。基本上，按鈕開始與4px的border-bottom和徘徊時，這減少到2px。正因爲如此，我用按鈕上的top: 2px補償。

這工作正常，但它影響了我不希望它做的其他元素。例如，它將它下面的段落拉起來。這裏有一個例子的jsfiddle：

http://jsfiddle.net/kD6dQ/

你可以看到，當你改變以下位置的段落懸停在按鈕上方。我如何阻止？

我已經在最新版本的Chrome和Firefox中測試過這個功能。

Answer 1

您使用top您的元素。當更改爲margin-top它的作品。

fiddle

CSS：

.btn-default:hover { 
    background: #eba22b; 
    color: white; 
    border-bottom: 2px solid #db9016; 
    margin-top: 2px; 
} 

Answer 2

嘗試此懸停聲明：

.btn-default:hover { 
    background: #eba22b; 
    color: white; 
    border-bottom: 2px solid #db9016; 
    top: 2px; 
    margin-bottom: 2px; 
} 

檢查此琴：http://jsfiddle.net/kD6dQ/1/

Answer 3

解決這個是簡單地增加高度，以最好的方式.btn-default

E.G：height: 35px;

DEMO HERE