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

尝试在悬停时将导航栏中的各个链接更改为不同的颜色。我好像想不出来

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>

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

我做这件事有困难！谢谢你的帮助

---

谢谢

是的，只需要

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>

---

是的，只需要

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，并为不同的类提供不同的链接

像

---

从HTML调用它们时，您需要为每个类分配CSS，并为不同的类提供不同的链接

像

---

从HTML调用它们的优雅解决方案是按属性值选择。第一个示例：

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

---

但是，这仅在直接选择a元素时有效。在第三个选择器li.active的情况下，该元素中没有关于链接位置的信息。在这种情况下，您必须按照rob的建议添加类。

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

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

---

但是，这仅在直接选择a元素时有效。在第三个选择器li.active的情况下，该元素中没有关于链接位置的信息。在这种情况下，您必须按照rob的建议添加类。

如果您使用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。

如果您使用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。

refere:refere:awesome。刚刚添加到我的SCS，并调整了颜色和吊杆。谢谢你，伙计。很好的解决办法@JetLaggyawesome。刚刚添加到我的SCS，并调整了颜色和吊杆。谢谢你，伙计。时差问题的解决办法很棒