Zurb基金会4顶级导航栏不变色

我从Lynda.com基金会网站上的Lynda.com视频和文档学习Zurb Foundation 4。Zurb基金会4顶级导航栏不变色

我在创建顶级导航栏时遇到了这个问题。它出现在基金会的主网站上，以及Lynda的培训视频，当鼠标结束时，顶部导航栏的菜单“名称”将会改变颜色（Zurb Foundation 4 official site），以及颜色渐变的按钮，这很漂亮！

我建立我的导航栏，我的菜单名称不会改变颜色，我的导航栏上的按钮也不会改变颜色（但这些按钮在页面的其他部分显示时会改变颜色）。

这是我的导航栏代码：

<nav class="top-bar hide-for-small"> 
    <ul class="title-area"> 
     <!-- Title Area --> 
     <li class="name"> 
      <h1><a href="#">Windweller's Blog</a></h1> 
     </li> 
    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> 
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> 
    </ul> 

    <!-- Right Nav Section --> 
    <section class="top-bar-section"> 
     <ul class="right"> 
      <li class="divider"></li> 
      <li class="active"><a href="#">Home</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Project</a></li> 
      <li class="divider hide-for-small"></li> 
      <li class="has-form"><a class="button active" href="#">About Me</a></li> 
     </ul> 
    </section> 
</nav>

我不知道这是从我的标记错误导致或者这是基金会4的默认设置。如果这是默认设置（没有顶部导航栏中的颜色变化），我应该如何正确地自行添加这些效果？（重写CSS或使用jQuery应用类？）

更新：

我在custom.css文件写了这个和我做了顶栏颜色变化发生

.top-bar-section li a:hover:not(.button) { 
    background: #222222; 
    }

我在原始的Foundation.css文件中找到了这行代码，但是它上面没有“：hover”......但是，我的按钮并没有改变颜色。

我试图添加这个，因为我发现它再次在原始Foundation.css文件中，但我无法让它工作。

.top-bar-section .button :hover { 
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; 
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; 
-webkit-transition: background-color 300ms ease-out; 
-moz-transition: background-color 300ms ease-out; 
transition: background-color 300ms ease-out; 
}

来源

2013-08-01 Allen Nie

您是否包括Foundation依赖项（CSS，JavaScript）？ –

是的。我已经包含了CSS文件（这是顶部栏正常显示的原因），至于js文件，我只包括了foundation.topbar.js –

我甚至没有看到zurb网站上的任何颜色变化... –

user2677732的代码似乎这样的伎俩。将其分别扩展为样式下拉项目将看起来像这样：

/* Main Item selector */ 
.top-bar-section li a:hover { 
    color: #fff; 
    background-color: #2ba6cb; 
    -webkit-transition: background-color 300ms ease-out; 
    -moz-transition: background-color 300ms ease-out; 
    transition: background-color 300ms ease-out; } 

/* Dropdown Item selector */ 
.top-bar-section li li a:hover { 
    color: #2ba6cb; 
    background-color: #fff; 
    -webkit-transition: background-color 300ms ease-out; 
    -moz-transition: background-color 300ms ease-out; 
    transition: background-color 300ms ease-out; }

来源

2013-08-22 23:23:11 atnguyen82

-1

@media only screen and (min-width: 58.75em) { 
.top-bar { 
background: #ffffff;

变化[background #ffffff;]任何颜色你想

来源

2013-08-08 09:06:18 jason

可能不是最好的解决办法，但尽量

.top-bar-section ul li a:hover { 
    background-color: #222222 !important; 
}

来源

2013-08-13 08:06:08 user2677732

这个工作没有基础5中的“ul”部分 – RicardoE

像基金会5上的魅力一样工作:) 谢谢！ – PlayHardGoPro

在基金会5上为我工作 - 否则不是压倒性的 – Ben

Zurb基金会4顶级导航栏不变色

回答

相关问题