0

画像にアクティブなクラスが添付されていない限り、画像をロールオーバーすると画像が変化するメニューがあります。私の問題は、画像が最初ではなく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" )
         });
    }
});
4

4 に答える 4

2

jQuery でこれを行うべきではありません。実際には必要ありません。CSS イメージ スプライトを読み、次のように css ホバー セレクターを使用してください。

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

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

これを行うと、使用する画像スプライトの背景位置を変更できます。怠けている場合は、スプライトを気にする代わりに、画像全体を変更できます。この方法は、ページ サイズがはるかに軽く、互換性もあることがわかります。

于 2011-08-10T16:48:16.467 に答える
0

コードを単純化する必要があります-これを試してください

$("#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" )
   }
});
于 2011-08-10T16:23:34.417 に答える
0

hoverこれは、else-block が最初に実行されるまで、2 回目の呼び出しを行っていないためです。ですべてのイベント ハンドラを設定$(document).readyすれば、準備完了です。

于 2011-08-10T16:21:18.237 に答える
0

作業例: http://jsfiddle.net/HNGMT/

**この例では、2 つの div を使用して、クラスのあるものとないものの違いを示していactiveます。もちろん、HTML もデモンストレーションのみを目的としています。また、クラスの jQuery セレクターはcontact、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"});
    }
});
于 2011-08-10T16:41:48.133 に答える