Question

尝试在悬停时将导航栏中的各个链接更改为不同的颜色。似乎无法弄明白。

HTML：

<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
   <ul class="nav navbar-nav">

<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="hidden">
                    <a href="#HOME"></a>
                </li>
                <li class="page-scroll">
                    <a href="#link1">1</a>
                </li>
                <li class="page-scroll">
                    <a href="#link2">2</a>
                </li>
                <li class="page-scroll">
                    <a href="#link3">3</a>
                </li>
                <li class="page-scroll">
                    <a href="#link4">4</a>
                </li>
            </ul>
        </div>

CSS：

.navbar-custom li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active 
{
outline: 0;
background-color: #bdc3c7 !important;
color: #fff;
}

将当前链接设置为红色。但是希望每个链接都有不同的颜色。例如。 Link1 =红色，Link2 =蓝色。

我这样做有困难！帮助赞赏！

谢谢！

Answer 1

是的，只需要class他们唯一

<强> HTML

        <li class="hidden colour1">
            <a href="#HOME"></a>
        </li>
        <li class="page-scroll colour2">
            <a href="#link1">1</a>
        </li>
        <li class="page-scroll colour3">
            <a href="#link2">2</a>
        </li>

<强> CSS：

.colour1:hover { background-color:blue; }
.colour2:hover { background-color:red; }
.colour3:hover { background-color:green; }

Answer 2

如果您使用 SASS ，可以在scss文件中以更清晰的方式完成此操作：

$colors: (1: red, 2: blue, 3: yellow, 4: black);

@each $anchor, $color in $colors {
   #{".navbar-custom .nav li:nth-child("+ (1 + $anchor) + ") a:hover"} {
       background-color: $color;
    }
}

将生成CSS ：

.navbar-custom .nav li:nth-child(2) a:hover {
  background-color: red;
}

.navbar-custom .nav li:nth-child(3) a:hover {
  background-color: blue;
}

.navbar-custom .nav li:nth-child(4) a:hover {
  background-color: yellow;
}

.navbar-custom .nav li:nth-child(5) a:hover {
  background-color: black;
}

现在，您可以为所有链接添加不同颜色的数量，让SASS为您生成CSS。

Answer 3

您需要为每个单独的类分配CSS，并为不同的链接提供不同的类

像

.pagescroll1{

}
.pagescroll2{

}

并从您的HTML中调用它们

Answer 4

优雅的解决方案是按属性值选择。第一个例子：

a[href="#link1"]:hover,
a[href="#link1"]:active,
{
  outline: 0;
  background-color: #bdc3c7 !important;
  color: #fff;
}

但是，这只适用于直接选择a元素的情况。使用第三个选择器li.active，该元素中没有关于它链接的位置的信息。在这种情况下，您必须按照rob。

的建议添加类

创建导航栏，其中每个链接在悬停时具有不同的颜色

4 个答案: