Foundation 4 未将悬停类应用于顶部菜单答案

【问题标题】：Foundation 4 not applying hover class to top menuFoundation 4 未将悬停类应用于顶部菜单
【发布时间】：2013-09-10 19:09:12
【问题描述】：

我正在尝试使用 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 似乎可以正常工作，因为菜单会正确展开（在移动视图中）。

【问题讨论】：

标签： javascript ruby-on-rails-4 zurb-foundation

【解决方案1】：

好吧，你的 JS 根本不工作。

正如您所指的，当您添加 .top-bar-section ul li:hover > a 时，您通过 CSS 赋予它行为。

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

...它会起作用，因为您已经添加了缺少的标记。希望对您有所帮助！

【讨论】：