我正在尝试使用Foundation 4创建一个导航栏。我想在链接文本时将链接文本更改为颜色。
我设置了
$topbar-link-color-hover
变量到我想要的颜色,在CSS中我看到颜色被添加到
.top-bar-section ul li.hover > a
然而,它不起作用。 CSS看起来JS似乎应该在菜单项中添加一个悬停类,但事实并非如此。
如果我将行更改为
.top-bar-section ul li:hover > a
我得到了我想要的效果。我想以正确的方式做到这一点。
菜单的HTML看起来像这样
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
</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>
<section class="top-bar-section">
<ul class="left">
<li>
<%= link_to "Link 1", '#' %>
</li>
<li>
<%= link_to "Link 2", '#' %>
</li>
<li>
<%= link_to "Link 3", '#' %>
</li>
<li>
<%= link_to "Link 4", '#' %>
</li>
</ul>
</section>
</nav>
我也在使用Rails 4。
这不是$ topbar-link-color-hover的目的,还是我在代码中遗漏了什么?
我还应该注意JS似乎正在工作,因为菜单会正确扩展(在移动视图中)。
答案 0 :(得分:0)
好的,你的JS根本不工作。
正如您所指出的,当您添加.top-bar-section ul li:hover&gt; a,你通过CSS给它行为。
基金会JS在将鼠标悬停在项目菜单上时添加了班级.hover,从文档(http://foundation.zurb.com/docs/components/topbar.html,请参阅“高级部分”),您的标记应如下所示:
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a href="#">Right Button with Dropdown</a>
<ul class="dropdown">
<li><a href="#">First link in dropdown</a></li>
</ul>
</li>
</ul>
执行此操作并检查代码时,您可能会看到添加了悬停类,因此应用了悬停类(a.hover)的CSS规则。
猜猜,如果你把菜单重写为......
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown not-click">
<a href="#">Title for dropdown...</a>
<ul class="dropdown">
<li>
<%= link_to "Link 1", '#' %>
</li>
<li>
<%= link_to "Link 2", '#' %>
</li>
<li>
<%= link_to "Link 3", '#' %>
</li>
<li>
<%= link_to "Link 4", '#' %>
</li>
</ul>
</li>
</ul>
</section>
...它会起作用,因为你已经添加了缺失的标记。希望它有所帮助!