css - 停止将其他元素在页面上向下移动的悬停效果

Question

我正在处理我的导航并添加了一种效果，当您将鼠标悬停在链接上时，底部会添加一个蓝色边框。它有效，但我遇到的唯一问题是，当您将鼠标悬停在链接上时，边框会将页面上的所有其他元素向下推 3 个像素(边框的大小)。

如果有人能告诉我如何解决这个问题，我们将不胜感激。这是相关代码:

HTML

<div id="nav" class="wrapper">
  <div class="site-navigation">
    <a href="#">About</a>
    <a href="#">Work</a>
    <div class="site-title">Noelle Devoe</div>
    <a href="#">Blog</a>
    <a href="#">Contact</a>
  </div>
</div>

CSS

.wrapper{
    width: 1000px;
    background-color: rgb(255,255,255);
    margin: 0 auto;
    overflow: hidden;
}

.site-navigation {
    text-align: center;
    overflow:hidden;
}

.site-navigation a{
    font-family: 'Arvo', serif, Georgia;
    width: 125px;
    float: left;
    padding: 50px 0 50px 0;
    letter-spacing: 4px;
    text-transform: uppercase;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    color: rgb(82,82,82);
}

.site-navigation a:hover{
    font-weight: bold;
    border-bottom: 3px solid rgb(4,141,195);
    text-shadow: rgb(200, 200, 200) 1px 1px 0px;
}

Answer 1

一个简单的解决方法是在元素未悬停时添加透明边框。

添加border-bottom: 3px solid transparent;到.site-navigation a。

.site-navigation a {
    font-family:'Arvo', serif, Georgia;
    width: 125px;
    float: left;
    padding: 50px 0 50px 0;
    letter-spacing: 4px;
    text-transform: uppercase;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    color: rgb(82, 82, 82);
    border-bottom: 3px solid transparent;
}