基础按钮更改颜色答案

【问题标题】：Foundation Button Change Color基础按钮更改颜色
【发布时间】：2013-12-24 03:35:41
【问题描述】：

我正在使用基础 5，我正在尝试更改活动按钮的背景颜色

<li class="active">

以及悬停在顶部栏中的普通按钮的背景颜色。任何想法？谢谢

【问题讨论】：

我不熟悉基础，但你不能用CSS来覆盖吗？ CSS：.active {background-color: #eee !important;}
凯文，你回答的意义何在？
@CiaranBaselmans 我尝试使用简单的 .active 和 .top-bar-section active {}。没有工作

标签： html css zurb-foundation

【解决方案1】：

对于顶栏 CSS，在基础 CSS 文件中搜索 active。您应该会遇到以下代码：

.top-bar-section ul li.active > a {
    background: #008cba;
    color: white; }
    .top-bar-section ul li.active > a:hover {
      background: #0079a1; }

将背景更改为您想要的颜色。
关于活动按钮的 CSS，您能否具体说明一下您的意思是什么按钮？

【讨论】：

非常感谢您的回答。清晰且切中要害。例如，我只是希望活动的主页按钮具有不同的背景颜色。我不会将 active 用于另一件事，所以你的答案正是我所需要的。
您知道什么类用于设置常规顶栏按钮的样式吗？我也想为它们添加悬停颜色。
在文件中搜索.top-bar-section ul li。您将在文件中看到 .top-bar-section ul li > a 和 .top-bar-section ul li > a.button 的 CSS 以及许多其他内容。

【解决方案2】：

试试看css

li.active{

    background-color:red !important;
}
li.active:hover{

    background-color:yellow !important;
}

查看 http://jsfiddle.net/jspatel/2weCW/1/>

处的工作示例

【讨论】：

这在正常情况下可以工作，但 Foundation 使用它自己的 css 文件进行基本样式和排列。之后，您应该包含您自己的 css 文件，您可以在其中进行修改。我试过那段代码，但没有用。 foundation.zurb.com/docs/components/topbar.html
好的，我稍微修改了上面的代码。尝试在每一行之后添加 !important，这会覆盖你的基础 css。