Zurb foundation ZURB基金会4顶部导航条不变色

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

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

我构建了我的导航栏，我的菜单名没有改变颜色，导航栏上的按钮也没有改变颜色（但这些按钮在页面的其他部分显示时确实会改变颜色）

这是我的导航栏代码：

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

我在原来的基础.CSS文件中找到了这行代码，但是它上没有“…悬停”……但是，我的按钮没有改变颜色。< /P> 我试图在原来的基础.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;
}

将

[background#ffffff；]

更改为您想要的任何颜色

---

将

[background#ffffff；]

更改为您想要的任何颜色

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

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

---

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

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

---

用户2677732的代码似乎起到了作用。将其扩展为单独设置下拉项的样式将类似于：

/* 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; }

---

用户2677732的代码似乎起到了作用。将其扩展为单独设置下拉项的样式将类似于：

/* 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; }

---

包括基础依赖项（CSS，JavaScript）吗？是的。我已经包含了CSS文件（这就是顶部栏正确显示的原因），至于JS文件，我只包括基础。TopBar。JSI甚至没有看到ZURB网站上的任何颜色变化……当你把鼠标悬停到基金会的网站顶部导航栏时，应该有悬停效果（颜色从黑色变为灰色）。如果你悬停在按钮上（也在顶部的导航栏上），按钮的颜色也会改变。你是否包括了基础依赖项（CSS，JavaScript）？是的。我已经包含了CSS文件（这就是顶部栏正确显示的原因），至于JS文件，我只包括基础。TopBar。JSI甚至没有看到ZURB网站上的任何颜色变化……当你把鼠标悬停到基金会的网站顶部导航栏时，应该有悬停效果（颜色从黑色变为灰色）。如果你悬停在按钮上（也在顶部的导航栏上），Button的颜色也会改变。就像在5号基础上的魅力一样：谢谢！在5号基金会上为我工作过——不是压倒一切，就像5号基础上的魅力一样：谢谢！在基金会5为我工作-没有覆盖