如何仅更改一个特定链接的导航链接悬停颜色？答案

【问题标题】：How to change nav-link hover color for just one specific link?如何仅更改一个特定链接的导航链接悬停颜色？
【发布时间】：2018-06-27 23:03:04
【问题描述】：

我正在使用 bootstrap 4，并且我有一个导航栏，其中包含一些使用 nav-link 类的链接以及一个使用 nav-link 的侧边栏导航。我需要特别更改一个链接的悬停颜色。最好的方法是什么？

【问题讨论】：

用 CSS 选择器定位它
谢谢。你是怎么做到的？
你了解 CSS 选择器吗？到目前为止，您尝试了什么？
我试图向它添加一个名为 holdbackhover 的附加类，并为它设置透明度，如下所示：.nav-link>.holdbackhover>a:hover{background-color:transparent;}跨度>
它似乎不起作用。

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

我试图向它添加一个名为 holdbackhover 的附加类，并为它设置透明度，如下所示：.nav-link>.holdbackhover>a:hover{background-color:transparen‌t;}

应该是

.nav-link.holdbackhover:hover {
   background-color:transparen‌t;
   color:red; // or what ever
}

【讨论】：

【解决方案2】：

您可以使用 nth-child 或定义类。

css:

    .navbar{
  &:nth-child(1){
    .nav-item{
      &:nth-child(2){
        .nav-link{
          color:#000;
          &:hover{
            color:blue;
          }
        }
      }
    }
  }
}

Else go 可以使用 class 或 Id Selector：

.hover{
 .nav-link{
           &:hover{
            color:green !important;
          }
        }
}

小提琴：JSFiddle

定义一个类可能更容易更改/识别，如果你不想添加额外的类，你可以使用 nth-child 选择器

【讨论】：