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>

我在悬停时添加了一条橙色线（边框底部）。当我将鼠标悬停在某个菜单项上时，整个菜单会跳一点。

如何避免这种跳跃？谢谢

Answer 1

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

由于边框底部而出现“跳跃”：.3rem solid＃ff5f06;

有两种方法可以避免这种情况。

在：after元素中设置边框（例如）

.navbar-nav> li> a {     字体大小：1.4rem；     颜色：＃504843;     文本转换：大写；     字母间距：.1rem；     字体粗细：700；     右边距：2rem；     职位：相对 }

.navbar-nav> li> a：悬停， .navbar-nav> li> a：focus {     背景：无；     字体大小：1.4rem；     颜色：＃262423;     字母间距：.1rem； }

.navbar-nav> li> a：hover：after， .navbar-nav> li> a：focus：after {     内容：“”；     位置：绝对；     显示：块；     左：0；     正确：0；     底部：0     高度：.3rem;     背景：＃ff5f06; }
其他选项是为元素设置透明边框并通过悬停更改颜色。

菜单在悬停时跳转

1 个答案: