html - 菜单在悬停时跳转

Question

我正在使用 bootstrap 4m 构建菜单，但我遇到了一个我无法弄清楚的问题。

header > nav {
    background-color: #fff;
}

.navbar {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
}

.navbar-nav > li > a {
    font-size: 1.4rem;
    color: #504843;
    text-transform: uppercase;
    letter-spacing: .1rem;
    font-weight: 700;
    margin-right: 2rem;
}

.navbar-nav > li > a:hover, 
.navbar-nav > li > a:focus {
    background: none;
    font-size: 1.4rem;
    color: #262423;
    border-bottom: .3rem solid #ff5f06;
    letter-spacing: .1rem;
}

.navbar-nav > li:last-child {
    margin-right: -2rem;
}

<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
       <div class="container">
        <a class="navbar-brand" href="#">
            <img src="assets/images/logo.png" alt="">
        </a>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>
        </div>
        </div>
    </nav>

我在悬停时添加了一条橙色线(border-bottom)。当我将鼠标悬停在菜单项上时，整个菜单会向上跳一点。

如何避免这种跳跃？ 谢谢

Answer 1

您可以在此处查看工作示例: jsfiddle.net/n5f2b4qk/

由于 border-bottom: .3rem solid #ff5f06;

有两种方法可以避免它。

1. 在 :after 元素中设置边框(如示例所示)

   .navbar-nav > li > a { 字体大小:1.4rem； 颜色:#504843； 文本转换:大写； 字母间距:.1rem； 字体粗细:700； 右边距:2rem； position:relative；

   .navbar-nav > li > a:hover, .navbar-nav > li > a:focus { 背景:无； 字体大小:1.4rem； 颜色:#262423； 字母间距:.1rem；

   .navbar-nav > li > a:hover:after, .navbar-nav > li > a:focus:after { 内容: ””; position:absolute； 显示: block ； 左:0； 右:0； 底部:0； 高度:.3rem； 背景:#ff5f06；

2. 其他选项是为元素设置透明边框并通过悬停更改颜色。