Zurb Foundation 4顶级导航栏不会改变颜色

Question

我正在从基金会网站上的Lynda.com视频和文档中学习Zurb Foundation 4.

当我创建我的顶部导航栏时,我遇到了这个问题.它出现在基金会的主网站上,以及来自Lynda的培训视频,顶部导航栏的菜单"名称"将在鼠标结束时改变颜色(Zurb Foundation 4官方网站),以及按钮逐渐变色,这是美丽的!

我构建了我的导航栏,我的菜单名称没有改变颜色,导航栏上的按钮也没有改变颜色(但是这些按钮在页面的其他部分显示时会改变颜色).

这是导航栏的代码:

<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>

我不确定这是由于我的标记错误造成的,或者这是Foundation 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;
}

Answer 1

可能不是最好的解决方案,但请尝试

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