我如何解决悬停问题？答案

【问题标题】：How I do to fix the hover?我如何解决悬停问题？
【发布时间】：2019-02-23 00:55:58
【问题描述】：

悬停未覆盖链接的所有高度，如何解决悬停问题？

我知道颜色的组合不正确，只是为了测试*

我正在使用 Bootstrap 4.3.1

.navbar .collapse ul li{
} 
.navbar .collapse ul li a{
    font-family: 'Comfortaa', cursive;
    font-size: 20px;
    color: skyblue !important;
}
.navbar .collapse ul li a:hover{
    background-color: deepskyblue;
    height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <a class="navbar-brand mx-5" href="#">
        <img src="Resources/Images/bootstrap-solid.svg" width="30" height="30" alt="">
    </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="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto mx-3">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">News</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

【问题讨论】：

标签： css bootstrap-4 hover navbar

【解决方案1】：

您的第一个 div 的 .navbar 类正在添加填充。这就是为什么悬停没有像你想要的那样显示。

FIX：通过添加此 CSS

删除填充（顶部和底部）

.navbar {
     padding: 0 1rem;
}

【讨论】：