如何在引导CSS中改变活动链接颜色？

Question

我正在使用joomla 3和bootstrap.min.js创建菜单并给出特殊的类，以便改变悬停、活动、访问的链接和菜单的样式。我找不到如何改变菜单的活动链接颜色。假设我有两份菜单。家和联系人。当我在家里的时候，它是红色的，我想改变这个颜色。我可以更改a：active和a：hover。这里是代码；

.topmenu .active a,
.topmenu .active a:hover {
    background-color: white;
}
.topmenu > li > a{
    color: orange;
    font-weight:bold;
}
.topmenu > li > a:hover {
    color: black;
    background:white;
} 

甚至我用div来改变活动链接的颜色。这是代码

#top-menu a{
background-color: white;
color: orange;
font-weight:bold;
}
#top-menu a:focus
{
    color: orange;
}
#top-menu a:hover{
    color: black;
}

每次当我点击主页时，它就会被激活，颜色是红色的。我想把它改成橙色。找不到怎么做。

这是我的标记代码

<div id="top-menu">
<ul class="nav menu nav-pills topmenu">
<li class="item-109 current active"><a href="/joomla3/">Home</a></li>
<li class="item-138"><a href="/joomla3/?Itemid=138"> Russian </a></li>
<li class="item-110"><a href="/joomla3/?Itemid=110"></a></li></ul>
</div>

你建议我怎么做？

Answer 1

为了完成您想要做的工作，您必须首先理解CSS定义中的一个：hover必须在一个：link和一个：visited之后，这样才能有效。其次，你必须明白，如果你的思维（A：active）指的是最终用户所在的当前链接的颜色，这是不正确的。（A：活动）当你点击链接时改变颜色。您可以在使用（a：active）创建不同颜色的链接上按住鼠标按钮来测试这一点。最后，如果您试图仅使用CSS来实现这一点，则必须在最终用户所在的当前链接上添加一个特定的类。下面我给大家留下了一个例子，希望对此有所帮助：）

您的导航栏如下
-主页
-俄罗斯
-意大利

我们在意大利页面上查看以下示例：

/*YOUR CSS SHOULD LOOK LIKE THIS*/

/* unvisited link grey */
#top-menu a:link {
	color: #777;
}
/* visited link grey */
#top-menu a:visited {
	color: #777;
}
/* mouse over link blue */
#top-menu a:hover {
	color: #0CF;
}
/* selected link blue */
#top-menu a:active {
	color: #0CF;
}
/* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
.activePage a {
	color: #0CF !important
}

<div id="top-menu">
  <ul class="nav menu nav-pills topmenu">
    <li><a href="http://yourdomain.com/page1.html">Home</a></li>
    <li><a href="http://yourdomain.com/page2.html">Russian</a></li>
    <li class="activePage"><a href="http://yourdomain.com/page3.html">Italy</a></li><!--Page End User Is On-->
    <!--Look UP ^^^^^^^^ Hope this helps :)-->
  </ul>
</div>

Answer 2

最后，通过实验，我找到了如何捕捉它。

#top-menu .current a
{
    color: orange !important;
}

谢谢大家的时间和帮助。非常感谢！