0

Webサイトのナビゲーションにホバー効果を作成しました。http://www.preview.brencecoghill.com/

すべての側面で希望どおりに機能する効果があります。1つを受け入れます。現在選択されているページでオレンジ色の四角を押し続けることができません。

  • たとえば、[連絡先]をクリックすると、そのページに移動し、最初はオレンジ色のブロックが連絡先リンクの後ろに表示されたままになります。ただし、[連絡先]リンクにもう一度カーソルを合わせると、ブロックが再び非表示になります。

現在表示しているページでこの効果を固定するにはどうすればよいですか？私はjavascriptにかなり慣れていないので、これはかなり簡単なことだと確信していますが、これを機能させる方法がわかりません。

このウェブサイトはWordpressに基づいており、メニューにクラス「.current_page_item」を出力しています。これを使用して、メニューアイテムを識別し、このアイテムにカーソルを合わせるとJavaScriptの起動を停止できると確信しています。

私はここで利用可能な詳細に基づいてテクニックを作成しました：http： //line25.com/tutorials/how-to-create-a-cool-animated-menu-with-jquery

私が行っていることを確認できるように、自分のWebサイトで使用したJavaScriptをここに貼り付けました。

jQuery(document).ready(function () {
    jQuery("#main-nav > li > a").addClass("js");
    jQuery("#main-nav > li > a").hover(
      function () {
          jQuery(this).stop(true, true).animate({ backgroundPosition: "(0 -20)" }, 200);
          jQuery(this).animate({ backgroundPosition: "(0 -5px)" }, 150);
      },
      function () {     
        jQuery(this).animate({ backgroundPosition: "(0 -100px)" }, 200);
      }
    );
});
4

1 に答える 1

1

current-menu-itemクラスをセレクターから除外します。

jQuery(document).ready(function () {
    var nav=jQuery("#main-nav > li:not(.current-menu-item) > a");
    nav.addClass("js");
    nav.hover(
      function () {
          jQuery(this).stop(true, true).animate({ backgroundPosition: "(0 -20)" }, 200);
          jQuery(this).animate({ backgroundPosition: "(0 -5px)" }, 150);
      },
      function () {   
        jQuery(this).animate({ backgroundPosition: "(0 -100px)" }, 200);
      }
    );
});
于 2012-10-21T23:02:36.677 に答える