0

次のコードを使用して、ナビゲーション リンクのフォントの色をホバー/オフ ホバーでアニメーション化しようとしています。境界線の下の色は正しく変更されますが、フォントの色は変更されません。また、別の色の current-menu-item CSS ルールを破棄しています。フォントの色が黄色であるべき current-menu-item でない限り、マウスをホバーするとフォントの色が青色になり、ホバーをオフにするとオフホワイトに戻ることが望ましい動作です。私はこれについての初心者なので、私のスタイルの欠如を許してください。色をサポートするために jQuery UI ファイルを含めました。どんな助けでも大歓迎です。完全な例はここで見ることができますhttp://www.buenolisto.com/alma

JS

        jQuery("li.social").hover(function(){
        jQuery(this).find("img").stop(true, true).animate({'marginTop': "-=20px"}, 'fast');
    }, function(){
        jQuery(this).find("img").stop(true, true).animate({'marginTop': "+=20px"}, 'fast');
    })
    jQuery("li.reservas").hover(function(){
        jQuery(this).find("img").stop(true, true).fadeOut({'marginTop': "-=30px"}, 'slow');
    }, function(){
        jQuery(this).find("img").stop(true, true).fadeIn({'marginTop': "+=30px"}, 'slow');
    })
    jQuery('ul.menu li a').hover(function() {
        jQuery(this).stop(true, true).animate({'borderBottomColor': "#2E9ECE",'color': "#FEFEFE"}, 'slow');
    }, function() {
        jQuery(this).stop(true, true).animate({'borderBottomColor': "#FFDF85",'color': "#2E9ECE"}, 'fast');
    })
4

1 に答える 1

0

フォントの色についての一部に答えます。色が間違っています！

'color':'#2E9ECE'内の最初の関数にあり、2番目の関数にある必要が.hover()あり#FEFEFEます。

完全に更新されたコードは次のようになります。

jQuery('ul.menu li a').hover(function() {
    jQuery(this).stop(true, true).animate({borderBottomColor:'#2E9ECE', color:'#2E9ECE'}, 'slow');
    Cufon.refresh(this);
}, function() {
    jQuery(this).stop(true, true).animate({borderBottomColor:'#FFDF85', color:'#FEFEFE'}, 'fast');
    Cufon.refresh(this);
})

注：構文ではanimate({})、プロパティを引用符で囲む必要はありません。

編集：質問の2番目の部分：

現在選択されているメニュー項目をホバリングコードから除外するには、jQueryセレクターを更新.not()して、current-menu-itemクラスのリスト項目を含めることができます。

jQuery('ul li a:not(.current-menu-item)').hover(...)

これで問題の2番目の部分が修正されます。

編集2：Cufonを使用してフォントをレンダリングしているため、jQueryを使用して設定した後、それを更新する必要があります。そうしないと、テキストが元の色（白）でレンダリングされます。両方の方法に追加Cufon.refresh(this);すると効果があるかもしれませんが、編集可能なソースコードを提供していないため、テストできません。

これを読んだ後、Cufonフォントをアニメーション化できるとは思いません-https://groups.google.com/forum/?fromgroups#!topic/cufon/RFfz6DDY0wUを参照してください。CSS3フォントを使用する必要があります。アニメーション化するか、Cufonフォントを保持し、アニメーション化するのではなく、ホバー時にフォントの色を白から青に変更するだけです。

于 2012-06-15T12:59:28.550 に答える