Question

我正在一个项目上，但是我遇到的问题是，当在移动设备上查看菜单时，当您尝试将鼠标悬停时，它将移动其他菜单并移动navbar的大小。 / p>

a.nav-link{
        letter-spacing: 0.1rem;
        color: green !important;
        border: 0.1rem solid transparent;
    }
    
    a.nav-active, a.nav-link:hover{
        border: 0.1rem solid #fff;
        color: #fff !important;
        transition: all 0.009s ease;
    }
    
    .navbar-toggler:focus,
    .navbar-toggler:active,
    .navbar-toggler-icon:focus {
        outline: none;
        box-shadow: none;
    }

<div class="container-fluid pr-0 pl-0">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">BLANK</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
               <span class="nav-icon-color" role="button" ><i class="fa fa-bars" aria-hidden="true" style="color:#e6e6ff"></i></span>
            </button>
    
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link mr-4 nav-active" href="#">HOME <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link mr-4" href="#">SERVICES</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link mr-4" href="#">ABOUT</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link mr-4" href="#">CONTACT</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link mr-4" href="#">LOCATION</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>

这是JSFiddle：https://jsfiddle.net/u6dqhts0/1/

你知道是什么原因造成的吗？

Answer 1

使用updated JSFiddle时，我注意到<li> items的内容大小在悬停期间确实在变化。

原因是因为在您的代码中您没有设置边框，所以该项目所需的有效内容大小在悬停在其上方时突然降低，而在移动该位置时再次升高鼠标光标移开。

以下代码需要在您的CSS中插入/更新才能正常工作（更新Fiddle中使用了代码，但未在帖子中显示）。

@media only screen and (max-width: 990px) {
    a.nav-link {
        border: 0.1rem solid transparent;
    }

    a.nav-active, a.nav-link:hover{
        border: 0.1rem solid transparent;
        color:#fff !important;
        transition: all 0.007s ease;
    }
}

真正的解决方案是在悬停过程中将边框设置为透明，这确实是需要的。

此JSFiddle中的示例。

引导程序：导航栏项目链接在移动视图上移动时悬停时切换导航栏

1 个答案: