В Bootstrap, как мне изменить цвет ссылок на панели навигации при наведении на них курсора? - PullRequest
Новая
       38

В Bootstrap, как мне изменить цвет ссылок на панели навигации при наведении на них курсора?

0 голосов
/ 28 мая 2020

Пожалуйста, помогите, это сводит меня с ума (это безумие, что я потратил столько времени на цвет текста панели навигации в целом).

Я только изучаю веб-разработку, поэтому я только что понял, как изменить цвет текста в моей навигационной панели, и теперь он становится уродливым синим, когда я нахожу на него курсор. Как мне понять, как это исправить?

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

Спасибо за вашу помощь! 

 <!--Navbar-->
    <nav class="navbar navbar-expand-lg yellow lighten-3 fixed-top scrolling-navbar">
        <div class="container">
            <!--center the navbar content-->
            <!-- Navbar brand -->
            <a class="navbar-brand navbar-text-color-custom" href="#">Pawsitive Lead</a>

            <!-- Collapse button -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
                    aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Collapsible content -->
            <div class="collapse navbar-collapse" id="basicExampleNav">

                <!-- Links - each sends you to the specific section of the page --> 
                <ul class="navbar-nav mr-auto smooth-scroll">
                    <li class="nav-item">
                        <a class="nav-link navbar-text-color-custom" href="#intro">Blog</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link navbar-text-color-custom" href="#best-features">Kdo smo?</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link navbar-text-color-custom" href="#examples">Izkušnje</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link navbar-text-color-custom" href="#gallery">V razmislek</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link navbar-text-color-custom" href="#contact">Pišite nam</a>
                    </li>
                </ul>
                <!-- Links -->

                <form class="form-inline">
                    <div class="md-form my-0">
                        <input class="form-control mr-sm-2" type="text" placeholder="Išči" aria-label="Search">
                    </div>
                </form>
            </div>
            <!-- Collapsible content -->

        </div>
    </nav>
    <!--/.Navbar-->

1 Ответ

1 голос
/ 28 мая 2020

Вы можете подойти к этому разными способами ..

  1. определить отдельный класс в отдельной таблице стилей css и переопределить цвет, используя !important:

например: создать класс newClass в newCss.css

.newClass:hover{
   color: red !important; /*red is an example, put whatever you want*/
}
определите тег стиля в html: 
<style>
.newClass:hover{
   color: red !important; /*red is an example, put whatever you want*/
}

</style>

в HTML, поместите класс внутри привязки: 

 <li class="nav-item">
 <a class=" newClass nav-link navbar-text-color-custom" href="#best-features">Kdo smo?</a></li>

Используя !important убедитесь, что к якорю применен красный цвет css.

...