關於懸停更改jQuery UI的按鈕圖標 - 在IE和Chrome上破解

Question

我創建了一個jQuery UI按鈕，並且想要在mouseenter事件中添加一個'X'輔助圖標，並在mouseleave事件中刪除'X'。聽起來很簡單。

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

如果您在按鈕內移動鼠標光標，則會多次觸發懸停事件。

它可以在Firefox中使用，但是在IE和Chrome中失敗。

這是很難解釋的離奇效果的話，但請看到的jsfiddle這裏：

http://jsfiddle.net/27SSr/

我的目標是要實現在所有瀏覽器一致的效果。 感謝=）

編輯***

現在我有一些線索，爲什麼懸停在IE和Chrome打破。 懸停UI按鈕幾次，檢查在Firebug的按鈕元素， 原來的html標籤的jQuery UI部件有缺陷..

<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的bug嗎？

你可以在這裏嘗試的例子：

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

並添加一行到CSS：

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

看到這裏的工作示例：http://jsfiddle.net/GCme2/4/

Answer 2

怎麼樣使用mouseenter和mouseleave事件，他們將只火一次每個。

訣竅是將按鈕封裝在包含元素中，並將鼠標事件附加到容器。這裏是the working jsfiddle

，代碼：

<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

爲什麼使用JavaScript？這是一項要求嗎？你可以使用css：hover 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(); 

});