Foundation 4不将悬停类应用于顶部菜单

Question

I'm trying to create a nav bar using Foundation 4. I want to make the link text change color when hovering over it.

I set the

$topbar-link-color-hover 

variable to the color I want and in the CSS I see the color is added to

.top-bar-section ul li.hover > a

However, it doesn't work. The CSS makes it seem like JS should be adding a hover class to the menu item, but it's not.

If I change the line to

.top-bar-section ul li:hover > a

I get the effect I want. I would like to do this the correct way though.

My HTML for the menu looks like this

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

I am also using Rails 4.

Is this not what $topbar-link-color-hover is intended for, or am I missing something in my code?

I should also note that JS seems to be working because the menu will expand properly (when in mobile view).

Answer 1

Ok, your JS is not working at all.

As you're pointing, when you add .top-bar-section ul li:hover > a, you're giving it the behavior via CSS.

Foundation JS adds the class .hover when hovering over the item menu, from docs ( http://foundation.zurb.com/docs/components/topbar.html , see "Advance part"), your markup should looks like:

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

When you do it and you inspect the code, you may see that hover class is added, and so the CSS rule for hover class (a.hover) is applied.

Just guessing, if you rewrite your menu as...

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

... it'll work because you'd have added the missing markup. Hope it helps!