0

我正在做一个项目，我遇到了这个问题，当在移动设备上查看菜单并且您尝试将鼠标悬停时，它会移动其他菜单并移动navbar大小。

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/

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

4

1 回答 1

0

使用更新的 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中的示例。

于 2020-07-27T12:41:39.540 回答