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

【问题标题】：Creating Navbar where each link has a different color when hover创建导航栏，其中每个链接在悬停时都有不同的颜色
【发布时间】：2014-02-16 23:08:24
【问题描述】：

试图在悬停时将导航栏中的各个链接更改为不同的颜色。好像没看懂。

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 = 蓝色。

我在执行此操作时遇到了麻烦！感谢您的帮助！

谢谢！

【问题讨论】：

参考：stackoverflow.com/questions/8716686/…

标签： html css hyperlink hover navbar

【解决方案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。

【讨论】：

太棒了。刚刚添加到我的 scss 并调整了颜色和 BOOM。谢谢大佬。
很好的解决方案@JetLaggy

【解决方案2】：

是的，只需要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; }

【讨论】：

【解决方案3】：

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

喜欢

.pagescroll1{

}
.pagescroll2{

}

并从您的 HTML 中调用它们

【讨论】：

【解决方案4】：

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

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

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

【讨论】：