Как мне сделать, чтобы исправить зависание? - PullRequest
Новая
       45

Как мне сделать, чтобы исправить зависание?

0 голосов
/ 23 февраля 2019

This is how the hover is displayed

Наведение не покрывает всю высоту ссылки, Как мне исправить закрепление?

Я знаю, что комбинацияцвета не верны, но только для тестирования *

Я использую 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>

1 Ответ

0 голосов
/ 23 февраля 2019

Класс вашего первого div .navbar добавляет заполнение.Вот почему наведение не отображается так, как вы хотите.

ИСПРАВЛЕНИЕ: удалите отступы (сверху и снизу), добавив CSS 

.navbar {
     padding: 0 1rem;
}
...