IF ELSEホバーステートメントは、2回目のホバーでのみ動作します

Question

アクティブなクラスがアタッチされていない限り、画像をロールオーバーすると画像が変化するメニューがあります。私の問題は、最初の画像ではなく2番目の画像でのみ画像が変化することです。これが何であるかのアイデア。

$("#contact").hover(function() { 
    if ($("#contact").is(".active")) { 
     $("#contact img").attr("src","Images/Menu/contact_hover.png") 
    } 
    else { 
     $("#contact").hover(function() { 
       $("#contact img").attr("src","Images/Menu/contact_hover.png") 
      }, 
      function() { 
      $("#contact img").attr("src","Images/Menu/contact.png") 
     }); 
    } 
}); 

Answer 1

あなたはjQueryを使ってこれを実行すべきではない、本当に必要はありません。 CSS Image sprites上に読んで、このようなCSSのホバーセレクターを使用してください：

#contact { 
    background: url(/url/of/img) no-repeat; 
} 

#contact:hover { 
    background-position: ; // Change to desired image 
} 

はあなたが怠け者なら、あなたが代わりに悩まのaltogther画像を変更することができ、使用する画像スプライトの背景位置を変更するために、これを行いますスプライト。この方法はよりもはるかに軽く、互換性はです。

Answer 2

あなたはhoverに2つ目の呼び出しを行っていないので、他のブロックが最初に実行されるまで、それはです。すべてのイベントハンドラーを$(document).readyに設定してください。

Answer 3

あなたはあなたのコードを簡素化する必要があります - で、この

$("#contact").hover(function() { 
    if (!$("#contact").hasClass("active")) { 
     $("#contact img").attr("src","Images/Menu/contact_hover.png") 
    } 
}, 
function() { 
    if (!$("#contact").hasClass("active")) { 
     $("#contact img").attr("src","Images/Menu/contact.png") 
    } 
}); 

Answer 4

の作業例を試してみてください。http://jsfiddle.net/HNGMT/

は**例はなしactiveと1のクラスとの違いを実証するために、2つのdivを使用しています。コースのHTMLは、デモンストレーションの目的のためだけです。 contactクラスのjQueryセレクターは、idセレクターを反映するように変更されます。

HTML：

<div class="contact"><img src="/contact.png" alt="contact inactive" /></div> 
<div class="contact active"><img src="/contact.png" alt="contact active" /></div> 

はJavaScript：

$(".contact").hover(function() { 
    $(this).find("img").attr({src:"contact_hover.png", alt:"contact hover"}); 
}, function(){ 
    var ele = $(this); 
    if(!ele.hasClass("active")){ 
     ele.find("img").attr({ src:"contact.png", alt:"contact inactive"}); 
    } 
});