0

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>

Rails4も使っています。

これは $topbar-link-color-hover の目的ではないのでしょうか、それともコードに何か不足していますか?

メニューが適切に展開されるため（モバイルビューの場合）、JSが機能しているように見えることにも注意してください。

4

1 に答える 1

0

わかりました、あなたの JS はまったく機能していません。

あなたが指摘しているように、.top-bar-section ul li:hover > a を追加すると、CSS を介して動作が与えられます。

Foundation JS は、ドキュメント ( http://foundation.zurb.com/docs/components/topbar.html、「高度な部分」を参照)から、項目メニューにカーソルを合わせるとクラス .hover を追加します。マークアップは次のようになります。

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

...不足しているマークアップを追加したため、機能します。それが役に立てば幸い！

于 2013-12-11T09:54:48.050 に答える