Question

我有一个带有悬停元素的简单导航栏。

.navip {
    float: left;
    text-decoration: none;
    font-weight: lighter;
}

.navip > a {
    display: block;
    color: black;
    text-decoration: none;
    font-size: 20px;
    font-weight: lighter;
    line-height: 40px;
}

.navip > a:hover {
    border-top: 3px solid blue;
}

当我将鼠标悬停在a上时，会显示边框。但它的文字略有下降。我怎么能解决这个问题？

JsFiddle：http://jsfiddle.net/w0btkceg/

编辑：解决了！我必须将高度增加到45并添加＆＃34; border-top：3px solid transparent ＆＃34;到＆＃34;导航a＆＃34;类。

Answer 1

我将它用于菜单：

        .menu-item {
            margin: 5px;
            font-size: 1em;
            font-weight: bold;
            float: left;
            border-top-style: solid;
            border-top-width: 4px;
            border-top-color: transparent;

        }
        .menu-item   a {
            padding: 5px 0;
            text-decoration: none;
        }
        .menu-item-selected {
            border-top-color: green;
        }
        .menu-item:hover {
            border-top-color: green;
        }

<div class="menu-item">
    <a href="">Test 1</a>
</div>
<div class="menu-item menu-item-selected">
    <a href="">Test 2</a>
</div>
<div class="menu-item">
    <a href="">Test 3</a>
</div>
<div class="menu-item">
    <a href="">Test 4</a>
</div>

Answer 2

尝试使用

.navip > a:hover {
border-top: 3px solid blue;
margin-top: -3px;

}

Answer 3

做一些像：

.navip > a {
    display: block;
    color: black;
    text-decoration: none;
    font-size: 20px;
    font-weight: lighter;
    line-height: 40px;
    border-top: 3px solid transparent;} /* add a transparent border to the a */

.navip > a:hover {
    border-top: 3px solid blue; /* Now just change the color value of the border from transparent to a color on over */
}

See working example here

解决方案：为 a 添加透明边框，然后在悬停时为其添加颜色。这样，文本就不会移动，因为边界在悬停之前就存在了。

Answer 4

您可以尝试box-sizing:border-box;这将包含框大小的边框，可能是最优雅的解决方案。

或者我以前对此的修复只是为正常链接填充10填充然后填充：8px;对于有边框的悬停版本。哪会对抗边界大小。

Answer 5

好的，您可以为border-top property声明.navip > a{}，其上有0个不透明度，然后在悬停时使用边框颜色，就像这个（check here）

.navip > a {
    display: block;
    color: black;
    text-decoration: none;
    font-size: 20px;
    font-weight: lighter;
    line-height: 37px; /*readjust for the border stuff*/
    border-top: 3px solid rgba(255,255,255,.0);/*or transparent*/
}

.navip > a:hover {
    border-top: 3px solid blue;
}

或者你可以在悬停时使用负边距顶部属性，或者如果你可以使用.navip＆gt;则使用top属性。 a来定位亲属，check it here：

.navip > a {
    position: relative;
    display: block;
    color: black;
    text-decoration: none;
    font-size: 20px;
    font-weight: lighter;
    line-height: 40px; 
}

.navip > a:hover {
    margin-top: -3px;/*or top: -3px*/
    border-top: 3px solid blue;
}

Answer 6

您可以使用box-shadow而不是border-top，如下所示：

.navip > a:hover {
    box-shadow: inset 0 3px 0 0 blue;
}

此处有更多信息：MDN Box Shadow

Border-Top＆amp;文字问题

6 个答案: