html - 边框顶部和文本问题

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

Answer 1

尝试使用

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