在 Bootstrap 中，如何更改悬停在导航栏上时链接的颜色？

Question

请帮忙，这让我发疯（我花了这么多时间在整个导航栏文本颜色上真是太疯狂了）。

我只是在学习网络开发，所以我刚刚想出了如何更改导航栏中的文本颜色，现在当我将鼠标悬停在它上面时它变成了难看的蓝色。我该如何解决这个问题？

我知道其他人以前也问过这个问题，但他们都得到了不适用于我的代码的具体答案，而且我不明白为什么这些解决方案有效，所以我可以自己弄清楚。

感谢您的帮助！

 <!--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-->

Answer 1

您可以通过不同的方式处理它..

在单独的 css 样式表中定义单独的 class 并使用 !important 覆盖颜色：

例如：在 newCss.css

中创建 class newClass

.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 中，将 class 放在锚点内：

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

通过使用 !important，您可以确保 css 红色应用于锚点。

在 Bootstrap 中，如何更改悬停在导航栏上时链接的颜色？

In Bootstrap, how do I change what color the links are in my navbar when hovering over them?

html

css

mdbootstrap