边框顶部和文本问题答案

【问题标题】：Border-Top & Text issue边框顶部和文本问题
【发布时间】：2015-01-26 11:04:15
【问题描述】：

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

.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 并将“border-top: 3px solid transparent”添加到“navip a”类中。

【问题讨论】：

标签： html css navigation

【解决方案1】：

尝试使用

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

}

【讨论】：

【解决方案2】：

我用这个做菜单：

        .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>

【讨论】：

【解决方案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 添加透明边框，然后在悬停时为其添加颜色。这样，文本不会移动，因为边框在悬停之前存在。

【讨论】：

【解决方案4】：

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

或者我之前的解决方法是为普通链接设置 10 个填充，然后填充：8px；对于有边框的悬停版本。这将抵消边框大小。

【讨论】：

【解决方案5】：

好的，你可以为.navip > a{}声明一个border-top property，不透明度为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 > 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;
}

【讨论】：

【解决方案6】：

您可以使用 box-shadow 代替顶部边框，如下所示：

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

更多信息在这里：MDN Box Shadow

【讨论】：