使用 CSS 更改活动菜单项的文本颜色答案

【问题标题】：Changing text color of active menu item with CSS使用 CSS 更改活动菜单项的文本颜色
【发布时间】：2013-10-04 22:38:34
【问题描述】：

在使用 CSS 更改我网站上活动菜单项的文本颜色方面，我需要您的帮助。

（这是一个 Joomla 网站，我正在根据我们的需要修改标准的 Gantry 框架模板）。

这是活动菜单项的 CSS...

.gf-menu.l1 > li.active {
      background: none;
      color: #19D57E;
      border: none;
      border-bottom: 3px solid #19D57E;
      border-radius: 0px;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      margin: 0 auto;
      padding-top: 1px;
    }

这里是被动菜单项的 CSS...

 .gf-menu .item {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 13px;
      line-height: 21px;
      color: #555555;
      padding: 4px 8px;
      text-align: left;
      text-shadow: 0px 0px 0 transparent;
      text-decoration: none;
      display: block;
      outline: 0;
      cursor: pointer;
      font-weight: bold;
    }

我想要的是活动菜单项中文本的颜色为绿色 (#19D57E)。

活动菜单项已在底部显示一条绿线，但菜单项的文本颜色与被动菜单项一样保持黑色。如您所见，我已经指定了颜色的文本，但由于某种原因它没有这样做。

我做错了什么？

如果你想看看网站，请到http://www.barrylong.tv/index.php/home

非常感谢！

赫克托

【问题讨论】：

我认为你对 active 和 hover 有误，使用 hover 而不是 active
@NishadNichoos 这行不通，因为.active 是 DOM 元素的一个类，而且悬停意味着鼠标悬停时会发生什么。

标签： css joomla

【解决方案1】：

这是所需的 CSS：

.gf-menu.l1 > li.active a {
      color: #19D57E;
}

注意.active之后的a

希望对你有帮助

【讨论】：

嗨洛德，谢谢。那效果很好。但是，我现在有一个小问题：活动菜单的下拉菜单项与背景颜色相同，因此您看不到它们。如何在被动时将活动下拉菜单项的颜色保持为黑色 (#555555)，在悬停时保持白色？
@Hectoritobh - 为此，您可以将以下内容用于 css。不要忘记颜色 .gf-menu .dropdown ul li .item { color: #555555 !important; } 之后的 !important 位
非常感谢！这使菜单项再次变黑（当被动时），但当悬停时，它们保持黑色。我已经有一些 CSS 可以在悬停时将菜单项变为白色，但您的 CSS 命令似乎推翻了这一点：.gf-menu li:hover, .gf-menu li.active:hover {border: 1px solid #19D57E;background: #19D57E;color: #ffffff;padding-top: 1px;border-radius: 4px;} 你建议我做什么？
只是让您知道：我删除了您建议的代码中的!important 位，因为它在悬停时停止菜单项以将颜色更改为白色。我非常感谢您的帮助。你摇滚！ :)

【解决方案2】：

将此添加到您的样式表.gf-menu > .active > a { color: #19D57E; }。

【讨论】：

【解决方案3】：

我认为您必须更改.active li 元素中.item 元素的颜色。目前您正在尝试更改 li 元素的颜色，而不是链接的颜色。

.gf-menu.l1 > li.active .item {
    /* ... */
    color: #19D57E;
    /* ... */
}

【讨论】：

【解决方案4】：

找到 CSS 块：item101 active last

在您的来源中注明“家”：

<li class="item101 active last">

<a class="item" href="/index.php/home">Home </a> </li>

您将看到要更改的文本颜色属性。您所做的事情不起作用的原因是您更改了错误的 CSS 块属性。

【讨论】：