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

Question

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

Answer 1

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

的CSS：

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

否则可以去上课或Id选择器：

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

小提琴：JSFiddle

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

Answer 2

  

我试图为它添加一个名为holdbackhover的附加类，并为此设置透明度：.nav-link＆gt; .holdbackhover＆gt; a：hover {background-color：transparen t;}

应该是

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