停止在页面上移动其他元素的悬停效果

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;
}