Javascript 基础4不将悬停类应用到顶部菜单 我试图用基础4创建一个导航栏。我想让链接文本在悬停时改变颜色
我设定了Javascript 基础4不将悬停类应用到顶部菜单 我试图用基础4创建一个导航栏。我想让链接文本在悬停时改变颜色,javascript,ruby-on-rails-4,zurb-foundation,Javascript,Ruby On Rails 4,Zurb Foundation,我设定了 $topbar-link-color-hover 变量添加到我想要的颜色,在CSS中我看到颜色被添加到 .top-bar-section ul li.hover > a 但是,它不起作用。CSS让JS看起来应该在菜单项中添加一个hover类,但事实并非如此 如果我把线路改成 .top-bar-section ul li:hover > a 我得到了我想要的效果。不过我想用正确的方法来做 我的菜单HTML如下所示 <nav class="top-bar">
$topbar-link-color-hover
变量添加到我想要的颜色,在CSS中我看到颜色被添加到
.top-bar-section ul li.hover > a
但是,它不起作用。CSS让JS看起来应该在菜单项中添加一个hover类,但事实并非如此
如果我把线路改成
.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>
-
-
-
-
-
我也在使用Rails4
这不是$topbar链接颜色悬停的目的,还是我的代码中缺少了什么
我还应该注意到,JS似乎在工作,因为菜单将正确展开(在移动视图中)。好的,您的JS根本不工作 正如您所指出的,当您添加.top-bar部分ul-li:hover>a时,您通过CSS为它提供了行为 Foundation JS添加了类。当鼠标悬停在项目菜单上时,从文档(,请参阅“高级部分”),您的标记应该如下所示:
<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>
-
当您这样做并检查代码时,您可能会看到添加了hover类,因此应用了hover类(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>
-
-
-
-
-
。。。它会起作用,因为您已经添加了缺少的标记。希望有帮助