CSS / HTML Bootstrap 4 нижний колонтитул - при наведении

Question

Я пытаюсь изменить цвет при наведении в нижнем колонтитуле Bootstrap.Я не могу понять код для доступа к ссылке должным образом.

Вот соответствующая часть моего HTML:

<footer>
        <div class="container1">
            <div class="row">
                <div class="col-md-3">
                    <!-- <h4>ABOUT US</h4> -->
                    <a class="nav-link" href="/public/about/"><h5>ABOUT US</h5></a>
                </div>
                <div class="col-md-6">
                </div>
                <div class="col-md-3">
                    <h5><strong>CONTACT INFO:</strong></h5><br>
                    <p><strong>Email:</strong> michael@hcmn.net</p>
                    <p><strong>Phone:</strong> (713)555-5555</p>

                </div>
            </div>
        </div>
        <div class="container2">
            <p><strong>© 2019 Ad Astra Web Services</strong></p>
        </div>
    </footer>

Это «О США», что я хотел бынравится менять цвет при наведении мыши.

Вот текущий код CSS:

.container1 .nav-link a:hover {
color: #808080;
}

Я считаю, что это просто вопрос использования правильного кода для доступа к ссылке.

Пожалуйста, помогите, если можете.

Answer 1

Для изменения попробуйте внести небольшие изменения в CSS

.container1 a.nav-link:hover {
color: #808080;
 }

Answer 2

Вы можете попробовать

.col-md-3 a:hover {
  color: #808080;
 }

Код в Jsfiddle

Answer 3

Селектор CSS неправильный.Это должно быть:

.container1 .nav-link:hover {
   color: #808080;
}

https://www.codeply.com/go/htf3EhitRj

Использование .nav-link a означает, что выберите a, который является дочерним по отношению к .nav-item, а это не то, что вам нужно.