在悬停链接上更改引导导航栏的颜色？

Posted 2023-02-22

【中文标题】在悬停链接上更改引导导航栏的颜色？

【英文标题】：Change color of bootstrap navbar on hover link?

【发布时间】：2013-05-13 14:54:25

【问题描述】：

我想知道在导航栏中将鼠标悬停在链接上时如何更改链接的颜色，因为目前它们的颜色很难看。

感谢您的建议？

html：

<div class="container">
    <div class="navbar">
        <div class="navbar-inner">
            <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
            </ul>
        </div>
    </div>
</div>

【问题讨论】：

谢谢，但以后请将您的 HTML（和任何其他代码）发布到问题本身中，这样观众就可以阅读。

【参考方案1】：

对于Bootstrap 3，这是我基于默认Navbar 结构的方式：

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus 
    background-color: #FFFF00;
    color: #FFC0CB;

【讨论】：

赞成，因为特殊性不必使用！important。不是说 !important 有时不能使用，但我更喜欢这个。

对我来说，它使用导航栏而不是默认导航栏。显然取决于实现。

【参考方案2】：

这样更干净：

ul.nav a:hover  color: #fff !important; 

没有必要比这更具体。不幸的是，在这种情况下，!important 是必需的。

出于可访问性原因和智能手机/平板电脑/触摸屏用户的原因，我还在同一声明中添加了 :focus 和 :active。

【讨论】：

尝试使用这是一个复杂的网站，不要破坏您的网站。您需要使用类名。如果你有另一个 里面有一个

【参考方案3】：

你可以试试这个来改变悬停时的链接背景

.nav > li > a:hover
    background-color:#FCC;

【讨论】：

请在您的回答中添加一些描述。

谢谢你 - 工作 - 但使用引导程序 4

【参考方案4】：

2018 年更新

您可以使用 CSS 更改 导航栏链接颜色 以覆盖 Bootstrap 颜色...

引导程序 4

.navbar-nav .nav-item .nav-link 
    color: red;

.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item:hover .nav-link 
    color: pink;

Bootstrap 4 navbar link color demo

引导程序 3

.navbar .navbar-nav > li > a,
.navbar .navbar-nav > .active > a
    color: orange;


.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus 
    color: red;

Bootstrap 3 navbar link color demo

---

更改或

自定义整个导航栏颜色

，请参阅：https://***.com/a/18530995/171456

【参考方案5】：

您必须覆盖 CSS 规则：

.navbar-inverse .brand, .navbar-inverse .nav > li > a

或

.navbar .brand, .navbar .nav > li > a 

取决于您分别使用的是深色主题还是浅色主题。为此，请添加一个带有覆盖规则的 CSS，并确保它出现在您的 HTML 在 Bootstrap CSS 之后。例如：

.navbar .brand, .navbar .nav > li > a 
    color: #D64848;

.navbar .brand, .navbar .nav > li > a:hover 
    color: #F56E6E;

您还可以自定义自己的 Boostrap here。在这种情况下，在 Navbar 部分中，您有 @navbarLinkColor。

【讨论】：

嗯，当我搜索这两个语句时，它回来说找不到它们？我应该发布用于引导的 css 吗？

【参考方案6】：

定位您要更改的元素并使用!important 覆盖分配给该元素的任何现有样式。确保在非绝对必要时不要使用!important 声明。

div.navbar div.navbar-inner ul.nav a:hover 
    color: #fff !important; 

【讨论】：

我找不到任何影响导航栏悬停的悬停语句。似乎 .navbar-link:hover, 语句会这样做，但它不会

如果您将我的代码复制并粘贴到您的 css 中，它将接管导航栏的当前属性并将其应用于悬停。

【参考方案7】：

使用Come thing link this，这是基于Bootstrap 3.0

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus 
    background-color: #977EBD;
    color: #FFFFFF;


.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus 
    background-color: #977EBD;
    color: #FFFFFF;

【参考方案8】：

.nav > li > a:focus, 
.nav > li > a:hover 

    text-decoration: underline;
    background-color: pink;

【参考方案9】：

抱歉回复晚了。您只能使用：

   nav a:hover

                   background-color:color name !important;


                 

【讨论】：

嘿 Farhan，这似乎与 trebor1979 在 2013 年 9 月 27 日回答时添加的解决方案完全相同，还是我在这里遗漏了一些细节？ :)对您收件箱中的垃圾评论感到抱歉。 *** UI 欺骗了我，让我提前提交评论。

【参考方案10】：

这样的事情对我有用（使用 Bootstrap 3）：

.navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus
    font-family: proxima-nova;
    font-style: normal;
    font-weight: 100;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: black;
 

在我的情况下，我还希望链接文本在悬停之前保持黑色，所以我添加了 .navbar-nav > li > a

.navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-nav > li > a
    font-family: proxima-nova;
    font-style: normal;
    font-weight: 100;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: black;
 

【参考方案11】：

.navbar-default .navbar-nav > li > a
  color: #e9b846;

.navbar-default .navbar-nav > li > a:hover
  background-color: #e9b846;
  color: #FFFFFF;

【讨论】：

和其他答案有区别吗？

【参考方案12】：

如果你导航栏代码如下：

<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li class="active"><a href="./">Fixed top</a></li>
        </ul>
    </div><!--/.nav-collapse -->
</div>

然后只需使用以下 CSS 样式来更改 navbar-brand

的悬停颜色

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus 
     color: white;

因此您的navbad-brand 悬停颜色将更改为白色。我刚刚对其进行了测试，它对我来说是正确的。

【参考方案13】：

这就够了：

.nav.navbar-nav li a:hover 
  color: red;

【参考方案14】：

这对我有帮助！

.navbar-light .navbar-nav > li > a:hover,
.navbar-light .navbar-nav > li > a:focus 
    color:  black;