【问题标题】: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 &gt; a.top-bar-section ul li &gt; 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。
猜你喜欢
  • 1970-01-01
  • 2020-08-03
  • 2014-07-11
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多