Question

我有一个浮动的h2标签，在悬停时应用了6px border-top。当我将鼠标悬停在文本上时，它会将文本及其下方的元素向下推。如何阻止边框移动文本和其他元素。

谢谢！

我的CSS：

HTML，身体，股利，跨度，小应用程序，对象，iframe中，H1，H2，H3，H4，H5，H6，P，BLOCKQUOTE，PRE，一个，简称，缩写，地址，大，引用代码，删除，DFN，EM，IMG，插件，大骨节病，q，S，桑普，小，罢工，强，子，SUP，TT，VAR，b，U，I，中心，DL，DT，DD，醇，UL，李，字段集，形式，标签，图例，表，标题，TBODY，TFOOT，THEAD，TR，TH，TD，物品，一边，帆布，细节，嵌入，图中，figcaption，页脚，页眉，hgroup，菜单，资产净值，输出，红宝石，部分，摘要，时间，标记，音频，视频{边界：0;字体大小：100％;字体：继承;余量：0;填充：0}制品，一边，细节，figcaption，图，页脚，头，hgroup，菜单，资产净值，节{显示：块}体{行高：1}醇，UL {列表样式：无} BLOCKQUOTE，q {引号：无} BLOCKQUOTE：前，BLOCKQUOTE：之后，q：前，q：{后内容：无}表{边界崩溃：倒塌;边界间隔：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:hover {
border-top: 6px solid orange;
padding-top: 14px;
}

Answer 3

提供此代码：

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

停止文字移动：悬停边框顶部

3 个答案: