होवर परिवर्तन पर jQuery यूआई का बटन आइकन - आईई और क्रोम

Question

पर टूटा हुआ मैंने एक jQuery UI बटन बनाया है, और माउसएन्टर ईवेंट पर 'एक्स' माध्यमिक आइकन जोड़ना चाहता हूं, और माउसलेव ईवेंट पर 'एक्स' को हटा देना चाहता हूं। आसान लगता है।

$("#hover").button({ 
icons: { 
    primary: "ui-icon-tag" 
} 
}).hover(function (event) { 
    // hover in   
    $(this).button("option", "icons", { primary: "ui-icon-tag", secondary: "ui-icon-close" }); 
}, function (event) { 
    // hover out 
    $(this).button("option", "icons", { primary: "ui-icon-tag" }); 
}); 

यदि आप माउस कर्सर को बटन में ले जाते हैं तो होवर ईवेंट कई बार ट्रिगर होता है।

यह फ़ायरफ़ॉक्स में काम करता है, हालांकि, आईई और क्रोम के साथ असफल रहा।

यह शब्दों में विचित्र प्रभाव की व्याख्या करने लेकिन कृपया jsFiddle यहाँ देख मुश्किल है:

http://jsfiddle.net/27SSr/

मेरा लक्ष्य सभी ब्राउज़रों भर में लगातार प्रभाव को प्राप्त करने के लिए है। धन्यवाद =)

संपादित ***

अब मैं क्यों मंडराना IE और क्रोम में टूट गया है के रूप में कुछ सुराग नहीं है। कई बार यूआई बटन होवर करके और Firebug में बटन तत्व का निरीक्षण किया, पता चला है html टैग jQuery यूआई विजेट द्वारा त्रुटिपूर्ण हैं ..

<button id="hover" class="ui-button ui-widget ui-state-default ui-corner-all ui-state-hover ui-button-text-icons" role="button"> 
<span class="ui-button-icon-primary ui-icon ui-icon-tag"/> 
<span class="ui-button-text">Hover me!</span> 
<span class="ui-button-icon-secondary ui-icon ui-icon-close"/> 
</button> 
<span class="ui-button-icon-primary ui-icon ui-icon-tag"/> 
<span class="ui-button-text">Hover me!</span> 
<span class="ui-button-icon-secondary ui-icon ui-icon-close"/> 
</button> 

नोट अतिरिक्त तक फैला और बटन बंद टैग अब? क्या यह व्यवहार एक jQuery UI की बग है?

आप यहाँ उदाहरण की कोशिश कर सकते हैं:

http://jsfiddle.net/B5sAk/1/

Answer 1

ठीक e.stop() करने के लिए, अंत में एक समाधान है कि काम करता है की जरूरत है, कुछ समय के लिए नगण्य के बाद .. पर कम से कम मेरे लिए सभ्य लगता है।

$("button").button({ 
    icons: { 
     primary: "ui-icon-tag", 
     secondary: "ui-icon-blank" 
    } 
}).hover(function() { 
    // hover in    
    $(".ui-button-icon-secondary", this).toggleClass("ui-icon-close ui-icon-blank"); 
}, function() { 
    // hover out 
    $(".ui-button-icon-secondary", this).toggleClass("ui-icon-close ui-icon-blank"); 
}); 

और सीएसएस के लिए एक पंक्ति जोड़ें:

.ui-icon-blank { background-position: -240px -224px; } /* point to blank area of sprite */ 

एक काम उदाहरण के लिए यहाँ देखें: http://jsfiddle.net/GCme2/4/

Answer 2

कैसे mouseenter और mouseleave घटनाओं, वे केवल आग एक बार प्रत्येक होगा उपयोग के बारे में।

चाल एक युक्त तत्व में बटन को समाहित करना था, और माउस ईवेंट को कंटेनर में संलग्न करना था।

<span id="hover-container"> 
    <button id="hover">Hover me!</button> 
</span> 

$("#hover").button({ 
    icons: { 
     primary: "ui-icon-tag" 
    } 
}); 

$("#hover-container").mouseenter(function() { 
    $("#hover").button("option", "icons", { primary: "ui-icon-tag", secondary: "ui-icon-close" }); 
    prependMessage("entering #hover"); 
}); 

$("#hover-container").mouseleave(function() { 
     $("#hover").button("option", "icons", { primary: "ui-icon-tag" }); 
    prependMessage("leaving #hover"); 
}); 

Answer 3

जावास्क्रिप्ट क्यों करें: यहाँ the working jsfiddle

और कोड है? क्या यह एक आवश्यकता है? क्या आप सीएसएस का उपयोग कर सकते हैं: होवर psuedoclass?

.ui-button-text .myicon{background-image: url('/path/reg.jpg')} 
.ui-button-text .myicon:hover{background-image: url('/path/to.jpg')} 

आप jQuery का उपयोग करना चाहिए, तो मैं कहूंगा कि आप के बाद प्रत्येक

...hover(function (event) { 
     // hover in   
     $(this).button("option", "icons", { primary: "ui-icon-tag", secondary: "ui-icon-close" }); 
     event.stop(); 
    }, function (event) { 
     // hover out 
     $(this).button("option", "icons", { primary: "ui-icon-tag" }); 
    event.stop(); 

});