Khi di chuột thay đổi biểu tượng nút của jQuery UI - bị hỏng trên IE và Chrome

Question

Tôi đã tạo nút Giao diện người dùng jQuery và muốn thêm biểu tượng phụ 'X' vào sự kiện mouseenter và xóa 'X' trên sự kiện mouseleave. Nghe có vẻ dễ dàng.

$("#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" }); 
}); 

Sự kiện di chuột được kích hoạt nhiều lần nếu bạn di chuyển con trỏ chuột trong nút.

Tính năng này hoạt động trong Firefox, tuy nhiên, không thành công với IE và Chrome.

Thật khó để giải thích tác dụng kỳ quặc trong lời nói, nhưng xin vui lòng xem jsFiddle đây:

http://jsfiddle.net/27SSr/

Mục tiêu của tôi là để đạt được hiệu ứng nhất quán trên tất cả các trình duyệt. Cảm ơn =)

EDIT ***

Bây giờ tôi có một số đầu mối là tại sao di chuột được chia trong IE và Chrome. Di nút UI một vài lần và kiểm tra các yếu tố nút trong Firebug, Hóa ra các thẻ html đang thiếu sót bởi jQuery UI phụ tùng ..

<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> 

Lưu ý kéo dài thêm và NÚT thẻ đóng bây giờ? Hành vi này có phải là lỗi của giao diện người dùng jQuery không?

Bạn có thể thử ví dụ ở đây:

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

Answer 1

Được rồi, sau khi loay hoay một lúc, cuối cùng là một cách giải quyết mà làm việc .. tại ít nhất điều đó có vẻ tốt với tôi.

$("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"); 
}); 

Và thêm một dòng vào CSS:

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

Xem ở đây cho một ví dụ làm việc: http://jsfiddle.net/GCme2/4/

Answer 2

thế nào về việc sử dụng mouseenter và mouseleave sự kiện, họ sẽ chỉ cháy một lần mỗi.

mẹo là để đóng gói nút trong phần tử có chứa và đính kèm các sự kiện chuột vào vùng chứa. đây là the working jsfiddle

và mã:

<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

Tại sao sử dụng javascript? Nó là một yêu cầu? Bạn có thể sử dụng css: hover psuedoclass?

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

Nếu bạn phải sử dụng jquery, sau đó tôi sẽ nói bạn cần làm e.stop() sau mỗi

...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(); 

});