मेरे पास एक मेनू है, कि जब आप छवि पर रोल करते हैं तो छवि बदल जाती है, जब तक कि छवि में एक सक्रिय वर्ग संलग्न न हो। मेरी समस्या यह है कि छवि केवल दूसरे रोल पर बदलती है, पहले नहीं। कोई विचार ऐसा क्यों है।

$("#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" )
         });
    }
});
0
goetzs 10 अगस्त 2011, 20:02

4 जवाब

सबसे बढ़िया उत्तर

आपको इसे jQuery के साथ नहीं करना चाहिए, वास्तव में इसकी कोई आवश्यकता नहीं है। कृपया CSS इमेज स्प्राइट्स पर पढ़ें और इस तरह css होवर चयनकर्ता का उपयोग करें:

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

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

आपके द्वारा उपयोग की जाने वाली छवि स्प्राइट की पृष्ठभूमि स्थिति को बदलने के लिए ऐसा करें, यदि आप आलसी हैं तो आप स्प्राइट से परेशान होने के बजाय छवि को पूरी तरह से बदल सकते हैं। आपको यह विधि बहुत हल्के पृष्ठ आकार के साथ-साथ अनुकूलता मिलेगी।

2
Dunhamzzz 10 अगस्त 2011, 20:48

ऐसा इसलिए है क्योंकि आप hover को दूसरी कॉल तब तक नहीं कर रहे हैं जब तक कि दूसरा-ब्लॉक पहली बार नहीं चलता। आप सभी ईवेंट हैंडलर्स को $(document).ready में सेट करें, और आपको जाने के लिए अच्छा होना चाहिए।

0
FishBasketGordo 10 अगस्त 2011, 20:21

आपको अपना कोड सरल बनाना चाहिए - इसे आजमाएं

$("#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" )
   }
});
0
Tomas 10 अगस्त 2011, 20:23

यहां काम करने का उदाहरण: http://jsfiddle.net/HNGMT/

**उदाहरण दो डिव का उपयोग करता है जो active के वर्ग वाले एक और बिना एक के बीच के अंतर को प्रदर्शित करता है। कोर्ट का HTML केवल प्रदर्शन उद्देश्यों के लिए भी है। और contact वर्ग के लिए jQuery चयनकर्ता को आईडी चयनकर्ता को प्रतिबिंबित करने के लिए संशोधित किया जाएगा।

एचटीएमएल:

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

जावास्क्रिप्ट:

$(".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"});
    }
});
0
RobB 10 अगस्त 2011, 20:41