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

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

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