1

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

我在创建顶部导航栏时遇到了这个问题。出现在Foundation的主网站上，以及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;
}
4

3 回答 3

5

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

.top-bar-section ul li a:hover {
  background-color: #222222 !important;
}
于 2013-08-13T08:06:08.307 回答
4

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-22T23:23:11.413 回答
-1 
@media only screen and (min-width: 58.75em) {
.top-bar {
background: #ffffff;

更改[background #ffffff;]为您想要的任何颜色

于 2013-08-08T09:06:18.730 回答