停止移動的文本：懸停與邊界頂部

Question

我有一個浮動h2標籤與6px的邊框頂部應用懸停。當我將鼠標懸停在文本上時，它將文本和元素向下推。如何阻止邊框移動文字和其他元素。

謝謝！

我的CSS：

HTML，身體，DIV，跨度大，小程序，對象，iframe中，H1，H2，H3，H4，H5，H6，P，BLOCKQUOTE，PRE，A，簡稱，縮寫，地址，大，引用代碼，德爾，DFN，EM，IMG，插件，大骨節病，q，S，桑普，小，罷工，強，子，SUP，TT，VAR，b，U，I，中心，DL，DT ，DD，醇，UL，LI，字段集，形式，標籤，圖例，表，標題，TBODY，TFOOT，THEAD，TR，TH，TD，物品，一邊，帆布，細節，嵌入，圖中，figcaption，頁腳，頭，hgroup，菜單，資產淨值，輸出，紅寶石，部分，摘要，時間，標記，音頻，視頻{邊界：0;字體大小：100％;字體：繼承;餘量：0;填充：0}製品，一邊，細節，figcaption，圖中，頁腳，頁眉，hgroup，菜單，資產淨值，節{顯示：塊}體{行高：1}醇，UL {列表樣式：無} BLOCKQUOTE，q {引號：無} BLOCKQUOTE：之前，blockquote：之後，q：之前，q：之後{content：none}表{border-collapse：collapse; border-spacing：0}

.container { 
width: 960px; 
margin: 0px auto; 
} 

.logo { 
float: left; 
clear: both; 
margin-top: 30px; 
} 

body { 
background-image: url("../images/bg.jpg"); 
border-top: 8px solid black; 
} 



h2 a { 
font-family: arial; 
text-decoration: none; 
text-transform: uppercase; 
font-size: 94px; 
color: black; 
float: right; 
margin: 0px; 
padding-top: 20px; 

} 

h2 a:hover { 
border-top: 6px solid orange; 
padding-top: 0px; 

} 

.clocknotes { 
width: 437px; 
margin: 0px auto; 
clear: both; 


} 



.brand-three { 
clear: both; 
margin-top: 85px; 
} 

.brand-three { 
font-size: 200px; 
line-height: 140px; 
float: left; 
letter-spacing: -20px; 

} 

.quote { 
clear: both; 
width: 417px; 
float: right; 
text-align: right; 
margin-top: -250px; 
font-size: 26px; 
} 

.social { 
clear: both; 
float: right; 
margin-top: -80px; 
} 

.footer { 
clear: both; 
top: 50px; 
position: relative; 
} 

Answer 1

CSS：

h2 a:hover { 
    border-top: 6px solid orange; 
    padding-top:14px; 

} 

DEMO：http://jsfiddle.net/rathoreahsan/VyRZW/

Answer 2

給這個代碼：

h2 a {border-top: 6px solid #fff;} /* Should match your background color */ 

Answer 3

減少頂部填充爲等量，不爲零：

h2 a:hover { 
border-top: 6px solid orange; 
padding-top: 14px; 
}