我该如何解决悬停？

Question

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

我知道颜色组合不正确，仅用于测试*

我正在使用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>

Answer 1

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

FIX：通过添加此 CSS

删除填充（顶部和底部）

.navbar {
     padding: 0 1rem;
}