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

Answer 2

如何添加：

border-bottom：3px solid transparent;

到.site-navigation a。

Answer 3

解决悬停问题的简单方法！

<div class="main">
  <div class="box"></div>
</div>



.main{
        height: 205px;
        width: 405px;
    }
    .box{
        height: 200px;
        width: 400px;
        border:1px solid rgb(0, 0, 0);
        transition: 
        0.3s;
        
    }
    .box:hover{
        margin-left: 5px;
        margin-bottom: 5px;
        box-shadow: -5px 5px black;
    }

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

3 个答案: